Search Menu
Hello,
I'm new to jQuery and I'm developing a web app for my job that will keep track of our equipment inventory. I would like the main search menu to consist of a series of HTML select elements, each of which would display different options depending on the options that are selected in the other elements. For example if the first select element, which we'll call "Asset Type", is set to "Desktop", then the next select element in the menu, which we'll call "Models", will display a list of desktop models to choose from. But if the Asset Type is set to "Laptop" instead, then the Model select element will change to a list of laptop models. Below is some sample code that I found online which creates a menu interface similar to what I'm trying to do, but I can't figure out how to get the various elements to change based on what's selected. If someone could point me in the right direction it would be greatly appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#asset" ).selectmenu();
$( "#manufacturer" ).selectmenu();
$( "#model" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
select {
width: 200px;
}
.overflow {
height: 200px;
}
</style>
</head>
<body>
<div class="demo">
<form action="#">
<fieldset>
<label for="asset">Asset Type</label>
<select name="asset" id="asset">
<option value="desktop" selected="selected">Desktop</option>
<option value="laptop">Laptop</option>
<option value="tablet">Tablet</option>
<option value="smart_phone">Smart Phone</option>
<option value="printer">Printer</option>
</select>
<label for="manufacturer">Manufacturer</label>
<select name="manufacturer" id="manufacturer">
<optgroup label="manufacturer">
<option value="android"></option>
<option value="apple">Apple</option>
<option value="dell" selected="selected">Dell</option>
<option value="lenovo">Lenovo</option>
<option value="samsung">Samsung</option>
</select>
<label for="model">Model</label>
<select name="model" id="model">
<option value="optiplex360">Optiplex 360</option>
<option value="optiplex520">Optiplex 520</option>
<option value="optiplex745">Optiplex 745</option>
<option value="optiplex990">Optiplex 990</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
Topic Participants
finisher1017
jakecigar