Materialize CSS Select - GeeksforGeeks

01 Jun, 2021
Materialize provides a select feature to create options that can be easily selected to provide more information for the web forms. The following are different select feature:
simple select-option: allows to select an option from select dropdown. For this, <select> and <option> tags are used.
select dropdown with multiple selection of options: allows to select more than one option from select dropdown. For this, multiple attribute are used in <select> tag.
select dropdown with option groups: allows to select from a list is a category based from select dropdown.
select dropdown with images: allows to display images with options.
select dropdown with browser defaults: it can be used with default class in select tag.
Disabled Styles:  
Materialize select provides disabled feature that has its own use. To make whole thing unselectable, add disabled attribute to the select element and to disable individual options  then add disabled to the options.
 
Example:
 
html
<!DOCTYPE html><html>    <head>        <!--Import Google Icon Font-->        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"              rel="stylesheet" />         <!-- Compiled and minified CSS -->        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />        <script type="text/javascript"                src=     "https://code.jquery.com/jquery-2.1.1.min.js">      </script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">      </script>         <!--Let browser know website            is optimized for mobile-->        <meta name="viewport"              content=              "width=device-width, initial-scale=1.0" />    </head>     <body class="container">        <div class="row">            <form class="col s12">                <div class="row">                    <label>Select</label>                    <div class="select1 green-text">                        <select>                            <option value=""                                    disabled selected>                              Select Topic                          </option>                            <option value="1">                              Machine Learning</option>                            <option value="2">                              Web Development</option>                            <option value="3">                              Language</option>                        </select>                    </div>                </div>                 <div class="row green-text">                    <label>Multi Select</label>                    <select multiple>                        <option value=""                                disabled selected>                          Select Topic</option>                        <option value="1">                          Machine Learning</option>                        <option value="2">                          Web Development</option>                        <option value="3">                          Language</option>                    </select>                </div>                 <div class="row green-text">                    <label>Select with Optgroup</label>                    <select>                        <optgroup label="Web Development">                            <option value="1">                              HTML</option>                            <option value="2">                              CSS</option>                            <option value="3">                              JavaScript</option>                        </optgroup>                         <optgroup label="Language">                            <option value="4">                              Python</option>                            <option value="5">                              C</option>                            <option value="6">                              Java</option>                        </optgroup>                    </select>                </div>                 <div class="row green-text">                    <label>Select with images</label>                    <select class="icons">                        <option value=""                                disabled selected>                          Select Technology</option>                        <option value="1"                                data-icon="https://pbs.twimg.com/profile_images/1138375574726955008/1fNUyEdv_400x400.png"                                class="circle"> HTML</option>                        <option value="2">JavaScript</option>                        <option value="3">CSS</option>                    </select>                </div>                 <div class="row green-text">                    <label>Browser default Select</label>                    <select class="browser-default">                        <option value=""                                disabled selected>                          Select Topic</option>                        <option value="1">                          Machine Learning</option>                        <option value="2">                          Web Development</option>                        <option value="3">                          Language</option>                    </select>                </div>                 <div class="row green-text">                    <label>                      Disabled Materialize Select</label>                    <label>                      Disabled Materialize Select</label>                    <select disabled>                        <option value=""                                disabled selected>                          Select Topic</option>                        <option value="1">                          Machine Learning</option>                        <option value="2">                          Web Development</option>                        <option value="3">                          Language</option>                    </select>                </div>                 <div class="row green-text">                    <label>Disabled Browser                      default Select</label>                    <select class="browser-default"                            disabled>                        <option value=""                                disabled selected>                          Select Topic</option>                        <option value="1">                          Machine Learning</option>                        <option value="2">                          Web Development</option>                        <option value="3">                          Language</option>                    </select>                </div>            </form>        </div>         <script>            $(document).ready(function () {                $("select").material_select();            });        </script>        <!-- Compiled and minified JavaScript -->        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">      </script>    </body></html>
Output:
sooda367
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript