Semantic-UI Dropdown Multiple Selection Type
Last Updated :
07 Mar, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...