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...