How to Create Selectmenu Widget in JQuery UI

Selectmenu in JQuery UI

The select menu widget extends the functionality of the select tag available in HTML. It converts the HTML select tag into a theme-able and customizable control. Learn how to create selectmenu in JQuery UI with simple steps:

1. Create a new HTML document

To create an HTML file, we need to create a new document file and save it as .html extension, then your HTML file will be created. Inside the file, we write the basic HTML document structure code by linking jquery UI library files. If you haven’t jquery UI library files click here to see how to download Jquery UI files.

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

2. Create HTML select tag

To create a select menubar widget, we need to create a <select> tag with a list of options as in the below example.

<h3>Marital Status</h3>
<select id="selectmenu">
<option value="s">Single</option>
<option value="m">Married</option>
<option value="d">Divorced</option>
<option value="w">Widow</option>
</select>

3. Create select menu widget

Select the element using the jQuery selector, and call select menu jQuery UI function on it.

<script type ="text/javascript">
$("#selectmenu").selectmenu();
</script>

The final code should look like this:

<!DOCTYPE html>
<html>
<head>
	<title>selectmenu</title>
	<link  href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
	<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>   
	<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>

	<h3>Marital Status</h3>
	<select id="selectmenu">
		<option value="s">Single</option>
		<option value="m">Married</option>
		<option value="d">Divorced</option>
		<option value="w">Widow</option>
	</select>

<script type ="text/javascript">
           $("#selectmenu").selectmenu(); 
</script>
</body>
</html>

Output

selectmenu in jquery ui

Leave a Reply