Published - | Updated - September 25, 2021 12:22 am
167 Views
Hi Dev,
Today, i we will show you select option jQuery ui example. This article will give you simple example of select option jQuery ui example. you will select option jQuery ui example. So let’s follow few step to create example of select option jQuery ui example.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select Option jQuery UI Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
label{
display:block;
margin:30px 0 0 0;
}
.overflow{
height:200px;
}
.demo{
margin: 0 auto;
width:50%;
}
h2{
text-align: center;
}
.demo fieldset{
margin-top:120px;
padding:0px 0px 50px 200px;
}
</style>
</head>
<body>
<h2>Select Option jQuery UI Example</h2>
<div class="demo">
<form action="#">
<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" id="speed">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
<label for="files">Select a file</label>
<select name="files" id="files">
<optgroup label="Scripts">
<option value="jquery">jQuery.js</option>
<option value="jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label="Other files">
<option value="somefile">PHP</option>
<option value="someotherfile">Laravel</option>
</optgroup>
</select>
<label for="number">Select a number</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="salutation">Select a title</label>
<select name="salutation" id="salutation">
<option disabled selected>Please pick one</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Dr.</option>
<option>Prof.</option>
<option>Other</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function(){
$( "#speed" ).selectmenu();
$( "#files" ).selectmenu();
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
$("#salutation").selectmenu();
});
</script>
</body>
</html>
I hope it will assist you…