Javascript 隐藏更改下拉菜单

我正试图让一个网站来处理电话号码，并确保它们由国家代码和区号验证（通过下拉菜单选择，根据之前的决定进行更改）。到目前为止，我得到的是：

<script type="text/javascript">

    $("#countryBox").change(function(){
     var selectedVal = $(this).val();

    if(selectedVal == "Canada")
    {
     $("#regionBox.usa,#regionBox.uk,#regionBox.au").hide();
     $("#regionBox.can").show();
    }
    else if(selectedVal == "United States")
    {
     $("#regionBox.can,#regionBox.uk,#regionBox.au").hide();
     $("#regionBox.usa").show();
    }
    else if(selectedVal == "United Kingdom")
    {
     $("#regionBox.usa,#regionBox.au,#regionBox.can").hide();
     $("#regionBox.uk").show();
    } else {
     $("#regionBox.usa,#regionBox.uk,#regionBox.can").hide();
     $("#regionBox.au").show();
    }
  });  
</script>

$（“#countryBox”）.change（函数（）{
var selectedVal=$（this.val（）；
如果（selectedVal==“加拿大”）
{
$（“#regionBox.usa，#regionBox.uk，#regionBox.au”）.hide（）；
$（“#regionBox.can”）.show（）；
}
else if（selectedVal==“美国”）
{
$（“#regionBox.can，#regionBox.uk，#regionBox.au”）.hide（）；
$（“#regionBox.usa”）.show（）；
}
else if（selectedVal==“英国”）
{
$（“#regionBox.usa，#regionBox.au，#regionBox.can”）.hide（）；
$（“#regionBox.uk”）.show（）；
}否则{
$（“#regionBox.usa，#regionBox.uk，#regionBox.can”）.hide（）；
$（“#regionBox.au”）.show（）；
}
});  

及

用户名：


密码：


国家：
选择国家
加拿大
美国
大不列颠联合王国
澳大利亚


地区：
选择区域
不列颠哥伦比亚省
阿尔伯塔省
萨斯喀彻温省
马尼托巴省
魁北克省
安大略
纽芬兰
新不伦瑞克省
新斯科舍省
爱德华王子岛
育空地区
西北地区
努纳武特
华盛顿
伦敦
悉尼




电话号码：


地址:



提交
取消

我所做的其他jquery尝试不会改变下拉列表。这一个现在有下拉列表（不管怎么说，第一步是三步中的第一步），但是脚本似乎没有运行/工作

关于如何使下拉列表正常工作的建议

---

注意，我需要扩展其他国家的地区，然后添加区号选择。。。但为了达到这一目的，我需要第一位来工作…

问题是jQuery选择器将查找id regionBox和className设置为can、usa、uk或au的任何元素。您需要将其更改为

$（'#regionBox option.can'）

适用于加拿大，同样适用于所有其他国家。你可以这样做：

$("#countryBox").change(function(){
    var selectedVal = $(this).val();

    $("#regionBox option").hide(); 

    switch(selectedVal) {
        case "Canada":
            $("#regionBox option.can").show();
            break;
        case "United States":
            $("#regionBox option.usa").show();
            break;
        case "United Kingdom":
            $("#regionBox option.uk").show();
            break;
        default:
            $("#regionBox option.au").show();
    }
});

您可以使用以下代码：

$("#countryBox").change(function(){ var selectedVal = $(this).val(); $("#regionBox option").hide(); if(selectedVal == "Canada") { $("#regionBox option.can").show(); } else if(selectedVal == "United States") { $("#regionBox option.usa").show(); } else if(selectedVal == "United Kingdom") { $("#regionBox option.uk").show(); } else { $("#regionBox option.au").show(); } }); $（“#countryBox”）.change（函数（）{ var selectedVal=$（this.val（）； $（“#regionBox选项”）.hide（）； 如果（selectedVal==“加拿大”） { $（“#regionBox option.can”）.show（）； } else if（selectedVal==“美国”） { $（“#regionBox option.usa”）.show（）； } else if（selectedVal==“英国”） { $（“#regionBox option.uk”）.show（）； }否则{ $（“#regionBox option.au”）.show（）； }

---

}); 此外，更改事件未绑定到元素。您需要添加

---

$（function（）{

到您的代码中。您添加的javascript/jQuery可能不会启动，除非它们位于DOM就绪函数中（对于jQuery绑定的元素）.

是你的

。can

有一种

显示的风格：none

？我似乎根本无法得到下面的建议。这几乎就像页面无法识别js一样。 $("#countryBox").change(function(){ var selectedVal = $(this).val(); $("#regionBox option").hide(); if(selectedVal == "Canada") { $("#regionBox option.can").show(); } else if(selectedVal == "United States") { $("#regionBox option.usa").show(); } else if(selectedVal == "United Kingdom") { $("#regionBox option.uk").show(); } else { $("#regionBox option.au").show(); } });