Jquery UI selectmenu() Method

Date Published: 08/05/2020Published By: JaiSchool

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

ValueValue
iconsUse 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

Leave a Reply

Your email address will not be published.