jQuery in Action
Making GET and POST requests
239
When both a style and a color are selected, the size dropdown should be
enabled and display the sizes available for the combination of style and
color.
enabled and display the sizes available for the combination of style and
color.
The dropdowns always need to be consistent with each other. We need
to ensure that, regardless of the order in which the user goes about manip-
ulating the controls, a combination that's not available in inventory never
be shown.
to ensure that, regardless of the order in which the user goes about manip-
ulating the controls, a combination that's not available in inventory never
be shown.
Let's roll up our sleeves and get to work.
To begin, let's lay out the additional
HTML
markup for the page body. Here's
the
HTML
for the new page with significant changes and additions to the code
highlighted in bold:
<body id="bootCloset2">
<img id="banner" src="boot.closet.branding.png"/>
<form action="" id="orderForm">
<div id="detailFormContainer">
<h1>Choose your boots</h1>
<div id="cascadingDropdowns">
<div>
<label>Please choose a style:</label><br/>
<select id="styleDropdown">
<option value="">Please choose a boot style</option>
<option value="7177382">
Caterpillar Tradesman Work Boot</option>
<option value="7269643">Caterpillar Logger Boot</option>
<option value="7141832">Chippewa 17" Engineer Boot</option>
<option value="7141833">Chippewa 17" Snakeproof Boot</option>
<option value="7173656">Chippewa 11" Engineer Boot</option>
<option value="7141922">Chippewa Harness Boot</option>
<option value="7141730">Danner Foreman Pro Work Boot</option>
<option value="7257914">Danner Grouse GTX Boot</option>
</select>
</div>
<div>
<label>Color:</label><br/>
<select id="colorDropdown" disabled="disabled"></select>
</div>
<div>
<label>Size:</label><br/>
<select id="sizeDropdown" disabled="disabled"></select>
</div>
</div>
<div id="detailsDisplay"></div>
</div>
</form>
</body>