jQuery in Action
Making GET and POST requests
245
<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>
</html>
Before we pat ourselves on the back too hard, we should know that we're not done
yet. We used custom commands in our functions that we haven't written yet! Let's
get back to work...
yet. We used custom commands in our functions that we haven't written yet! Let's
get back to work...
Writing the custom commands
Our cascading dropdowns example needed to perform two operations on the
select elements (dropdowns) on our page: removing all options from a dropdown
and loading it with options defined within a JavaScript data construct.
select elements (dropdowns) on our page: removing all options from a dropdown
and loading it with options defined within a JavaScript data construct.
We made the decision to implement these operations as jQuery commands for
two major reasons:
We knew that we'd need to perform these operations in multiple places
throughout our page, so we should, at minimum, separate these opera-
tions out into individual functions rather than repeat them in inline code.
throughout our page, so we should, at minimum, separate these opera-
tions out into individual functions rather than repeat them in inline code.
These operations are general enough to be useful elsewhere on the site
and even in other web applications. Defining and structuring them as
jQuery commands makes a lot of sense.
and even in other web applications. Defining and structuring them as
jQuery commands makes a lot of sense.