Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Dropdown Multiple Selection Type

Improve Article
Save Article
  • Last Updated : 07 Mar, 2022
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

A Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3 types of content Header, divider, and icon. In this article, we will learn about the Multiple Selection Type.

Semantic-UI Dropdown Multiple Selection Type is used for creating a select dropdown that can allow multiple selections. We use the UI fluid dropdown classes to create a normal selection and then add the multiple attributes for allowing the multiple selections.

Semantic-UI Dropdown Multiple Selection Type Attribute:

  • multiple: This attribute is used for creating a select dropdown that can allow multiple selections.

Syntax:

<select name="..." multiple="" class="ui dropdown">
    <option value="">...</option>
    <option value="">...</option>
    <option value="">...</option>
</select>

The below example illustrates the Semantic-UI Dropdown Multiple Selection Type:

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <div class="ui container">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>Semantic-UI Dropdown Multiple Selection Type</h3>
            <select multiple=""
                    class="ui fluid dropdown">
                <option value="">
                  Company Name
                </option>
                <option value="GFG">
                  GeeksforGeeks
                </option>
                <option value="Amazon">
                  Amazon
                </option>
                <option value="Apple">
                  Apple
                </option>
                <option value="Flipkart">
                  Flipkart
                </option>
            </select>
        </div>
        <script>
            $('.ui.dropdown').dropdown();
        </script>
    </center>
</body>
  
</html>


Output:

Semantic-UI Dropdown Multiple Selection Type

Semantic-UI Dropdown Multiple Selection Type

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <div class="ui container">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>Semantic-UI Dropdown Multiple Selection Type</h3>
            <select multiple="" c
                    lass="ui fluid dropdown">
                <option value="">
                  Departments
                </option>
                <option value="HR">
                  HR
                </option>
                <option value="Sales">
                  Sales
                </option>
                <option value="Marketing">
                  Marketing
                </option>
                <option value="Dev">
                  Development
                </option>
                <option value="Testing">
                  Testing
                </option>
                <option value="Delivery">
                  Delivery
                </option>
            </select>
        </div>
        <script>
            $('.ui.dropdown').dropdown();
        </script>
    </center>
</body>
  
</html>


Output:

Semantic-UI Dropdown Multiple Selection Type

Semantic-UI Dropdown Multiple Selection Type

Reference: https://semantic-ui.com/modules/dropdown.html#multiple-selection


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!