javascript - jQuery 链式选择菜单的简单问题

Question

用 Javascript 构建的我的链式选择菜单几乎可以完美运行:

演示:http://jsfiddle.net/seqL2cfo/

但是，当我选择US > Alaska 然后返回Choose a State... 时，所有US 结果都消失了。然后，当我将默认国家/地区更改为选择国家/地区...时，所有结果都会消失。

为什么无法恢复到默认状态？

Javascript:

jQuery('#cat').change(function () {
    var val = jQuery(this).val();
    jQuery("#statecat").toggle(val == "us");

    if (val == "0") 
        jQuery('#countries_select').siblings('div').show();
    else {
        jQuery('form').siblings('div').hide();
        jQuery('.' + val).show();
    }
});

jQuery('#statecat').change(function() {
    jQuery('.state1').hide();
    jQuery('.' + jQuery(this).val()).show();
});


jQuery("#countries_select select").change(function(){
    console.log(jQuery(this).val())

    if( jQuery(this).val() == "us"){
        jQuery("#state_select").show();
    } else {
        jQuery("#state_select").hide();
    }

    jQuery("ul.countries > li").hide()
    jQuery("ul.countries ." + jQuery(this).val() ).css("display", "block")
})

谢谢

Answer 1

您必须检查选择的值是否为 0/空，然后显示所有国家/州:

if(jQuery(this).val()  == ''){
      jQuery("ul.countries > li").show()
}else{
    jQuery("ul.countries > li").hide()
    jQuery("ul.countries ." + jQuery(this).val() ).css("display", "block")        
}

更新的 fiddle : http://jsfiddle.net/seqL2cfo/1/