Semantic-UI Dropdown Multiple Selection Type
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
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
Reference: https://semantic-ui.com/modules/dropdown.html#multiple-selection
Please Login to comment...