Drop down progression - long version
HTML
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<div id="mod">
<select id="zone">
<option value="0">-- Select Zone --</option>
</select>
<select id="region" disabled>
<option value="0">-- Select Region --</option>
</select>
<select id="state" disabled>
<option value="0">-- Select State --</option>
</select>
<select id="county" disabled>
<option value="0">-- Select County --</option>
</select>
<select id="code" disabled>
<option value="0">-- Select Code --</option>
</select>
</div>
CSS
#mod select {
display:block;
width:160px;
margin-bottom:5px
}
JavaScript
var data = {
"zone01": [{
"region": "North",
"state": "New York",
"county": "Albany",
"code": "01"
}, {
"region": "North",
"state": "New York",
"county": "Albany",
"code": "05"
}, {
"region": "North",
"state": "Maine",
"county": "Auburn",
"code": "07"
}],
"zone02": [{
"region": "South",
"state": "Florida",
"county": "Gainseville",
"code": "82"
}, {
"region": "South",
"state": "Florida",
"county": "Macclenny",
"code": "73"
}, {
"region": "South",
"state": "Mississippi",
"county": "Adams County",
"code": "104"
}, {
"region": "Southwest",
"state": "Texas",
"county": "Anderson",
"code": "88"
}]
};
$.each(data, function (k, v) {
var zone = JSON.stringify(k);
zone = zone.replace(/"/g, '');
$('#zone').append('<option value="' + zone + '">' + zone + '</option>');
});
$('#mod select').change(function () {
var pick = $(this).attr('id');
var zoneValue = $('select#zone option:selected').val();
var regionValue = $('select#region option:selected').val();
var stateValue = $('select#state option:selected').val();
var countyValue = $('select#county option:selected').val();
var codeValue = $('select#code option:selected').val();
switch (pick) {
case 'zone':
$('select#region').removeAttr('disabled').val('0');
$('select#region option:not([value="0"])').remove();
$('select#state option:not([value="0"])').remove();
setValues('zone', zoneValue);
$('select#state').attr('disabled', 'disabled').val('0');
$('select#county').attr('disabled', 'disabled').val('0');
$('select#code').attr('disabled',...