jQuery in Action
244
CHAPTER 8
Talk to the server with Ajax
.change(adjustSizeDropdown);
});
function adjustColorDropdown() {
var styleValue = $('#styleDropdown').val();
var dropdownSet = $('#colorDropdown');
if (styleValue.length == 0) {
dropdownSet.attr("disabled",true);
$(dropdownSet).emptySelect();
adjustSizeDropdown();
} else {
dropdownSet.attr("disabled",false);
$.getJSON(
'getColors.jsp',
{style:styleValue},
function(data){
$(dropdownSet).loadSelect(data);
adjustSizeDropdown();
}
);
}
}
function adjustSizeDropdown() {
var styleValue = $('#styleDropdown').val();
var colorValue = $('#colorDropdown').val();
var dropdownSet = $('#sizeDropdown');
if ((styleValue.length == 0)||(colorValue.length == 0) ) {
dropdownSet.attr("disabled",true);
$(dropdownSet).emptySelect();
}else {
dropdownSet.attr("disabled",false);
$.getJSON(
'getSizes.jsp',
{style:styleValue,color:colorValue},
function(data){$(dropdownSet).loadSelect(data)}
);
}
}
</script>
</head>
<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">