Guys,
I have a code snippet which I would like to improve and optimize and was
hoping to get some help. The form has two chained selects so when you
select an option on the first one, the second gets populated via an Ajax
call. The code is based off of Remy Sharp's chained select article and
I've added some code for special situations. Selectbox #1 lists
available products while selectbox #2 will display certificates
belonging to the product chosen.
Here are the situations:
1) If product selected has certificates, then second dropdown is
populated via Ajax call
2) If product selected has no certificates, then second dropdown is made
invisible
3) If product selected is “All” (which has an empty value), then second
dropdown is populated with all certificates the same as when the page
initially loaded
I know this code can be done better and I'm all ears on improving it.
$(function(){
$("select#prod_id").change(function(){
// Default options
var defaultOptions = '<option value="">All</option><option
value="141">CCA for Citrix Access Gateway 4</option><option
value="142">CCA for Citrix Access Gateway 8 Enterprise
Edition</option><option value="144">CCA for Citrix EdgeSight
4</option><option value="143">CCA for Citrix NetScaler 8</option><option
value="140">CCA for Citrix Password Manager 4</option><option
value="170">CCA for Citrix Provisioning Server 4</option><option
value="145">CCA for Citrix WANScaler 4</option><option value="139">CCA
for XenApp (Presentation Server 4)</option><option value="157">CCA for
XenServer 4</option><option value="146">CCEA for Citrix XenApp
(Presentation Server 4)</option><option value="147">CCIA for XenApp
(Presentation Server 4)</option><option value="148">CCSP 2007
</option><option value="149">CCSP for Citrix Presentation Server
4</option>';
if ($(this).val() == ""){
$("select#cert_id").html(defaultOptions);
$( "select#cert_id option:eq(0)" ).attr("selected",
true );
$("#certification").show();
}
else
{
$.getJSON("/courses/exams/getcerts.cfm?headerescape=true",{id:
$(this).val()}, function(j){
var options = '';
if (j.length > 0){
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' +
j[i].optionDisplay + '</option>';
}
$("select#cert_id").html(options);
$( "select#cert_id option:eq(0)"
).attr("selected", true );
$("#certification").show();
}
else
{
options = '<option value=""></option>';
$("select#cert_id").html(options);
$("#certification").hide();
}
});
}
})
})
