Jquery UI gives you selectmenu() method/widget to design your menu that is created with a tag <select></select>.
The selectmenu() method has some options, methods, and events to give you the ability to customize your menu. You can insert icons in the menu using its icons option.
If you want to change the color and other design for which options are not available, simply select with the help of class or id in CSS. You can find hidden classes if you inspect element.
Official documentation:- https://api.jqueryui.com/selectmenu/
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI selectmenu()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<select name="course" id="courses">
<optgroup label="Web Designing Languages">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</optgroup>
<optgroup label="Web Development Languages">
<option value="sql">SQL</option>
<option value="php">PHP</option>
</optgroup>
</select>
<script>
$(document).ready(function(){
$("#courses").selectmenu();
});
</script>
</body>
</html>
Options of selectmenu() widget
| Value | Value |
|---|---|
| icons | Use jquery UI icons |
icons Option
Use icons:{button:"ui-icon-circle-triangle-n",} option to change the icon for the select list.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI selectmenu()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<select name="course" id="courses">
<optgroup label="Web Designing Languages">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</optgroup>
<optgroup label="Web Development Languages">
<option value="sql">SQL</option>
<option value="php">PHP</option>
</optgroup>
</select>
<script>
$(document).ready(function(){
$("#courses").selectmenu({
icons:{
button:"ui-icon-triangle-n",
}
});
});
</script>
</body>
</html>
Related to this post~
Publish A Comment