Javascript 使用选择选项时如何使用jQuery隐藏和显示效果

我还有一个疑问，我很接近答案，但没有得到它的工作，实际上我有一个默认的输入文本和默认下拉列表（下拉列表，其中包括西孟加拉邦和其他）。现在，如果在下拉菜单下点击西孟加拉邦，那么默认输入应该隐藏，西孟加拉邦下拉菜单应该显示。下面是我尝试过的代码。有人能给我介绍一下jQuery的新知识吗

谢谢

选择状态
西孟加拉邦
其他
选择你的地区
阿里布尔杜阿尔
班库拉
巴达曼
巴达曼
比尔普姆
库曲比哈尔
大吉岭
北方迪纳杰普尔酒店
达克申迪纳杰普尔酒店
胡闹
豪拉
杰尔拜古里
哈格拉姆
北方迪纳杰普尔酒店
卡伦邦
马尔达
帕希姆麦迪尼普尔酒店
梅迪尼普尔酒店
穆尔希达巴德
纳迪亚
帕加纳斯北24号
帕尔干纳南24号
普鲁利耶
$（文档）.ready（函数（）{
$（“#状态”）。在（“选择”，函数（）上{
if（$（this.val（）=“西孟加拉邦”）{
$（“.otherdistricts”）.hide（）；
$（“.westbengaldistrict”）.show（）；
}
});
});

jquery代码中有错误。使用下面的代码，它运行良好并经过测试

<script>

           $(document).ready(function(){
              $("select").change(function(){
                    $( "select option:selected").each(function(){
                        //enter bengal districts
                        if($(this).attr("value")=="WestBengal"){
                            $(".enterotherstates").hide();
                            $(".enterbengaldistricts").show();
                        }
                        //enter other states
                        if($(this).attr("value")=="Others"){
                            $(".enterbengaldistricts").hide();
                            $(".enterotherstates").show();
                        }
                    });
                });  
            }); 

        </script>

$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（“选择选项：选定”）。每个（函数（）{
//进入孟加拉地区
如果（$（本）.attr（“值”）=“西孟加拉邦”）{
$（“.enterotherstates”）.hide（）；
$（“.enterbengaldistricts”）.show（）；
}
//进入其他国家
如果（$（this.attr（“值”）=“其他”）{
$（“.enterbengaldistricts”）.hide（）；
$（“.enterotherstates”）.show（）；
}
});
});  
}); 

回答您的最新问题

$(document).ready(function(){
$(".westbengaldistrict").hide(); // first hide the select
$("#state").on("change",function() {
       if ($(this).val() === "WestBengal") {
          $(".otherdistricts").hide();
          $(".westbengaldistrict").show(); // show on change
      }
   });
});

---

在javaScript代码中，右括号和方括号正好相反

应该是这样的

$(document).ready(function () { code here });

但是你有

$(document).ready(function () { code here )};

试试这个

 <script>
      $(document).ready(function () {
        $("select").change(function () {
          $("select option:selected").each(function () {
            //enter bengal districts
            if ($(this).attr("value") == "WestBengal") {
              $(".enterotherstates").hide();
              $(".enterbengaldistricts").show();
            }
            //enter other states
            if ($(this).attr("value") == "Others") {
              $(".enterbengaldistricts").hide();
              $(".enterotherstates").show();
            }
          });
      });
    });
</script>

$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（“选择选项：选定”）。每个（函数（）{
//进入孟加拉地区
如果（$（本）.attr（“值”）=“西孟加拉邦”）{
$（“.enterotherstates”）.hide（）；
$（“.enterbengaldistricts”）.show（）；
}
//进入其他国家
如果（$（this.attr（“值”）=“其他”）{
$（“.enterbengaldistricts”）.hide（）；
$（“.enterotherstates”）.show（）；
}
});
});
});

您的代码有错误。您的代码是：

$(document).ready(function())};

改为：

$(document).ready(function()});

---

由于

select

是一个表单元素，您可以右键使用

val（）

方法而不是

$（this）.attr（“value”）

来获取值。

您的代码中有几个问题。首先，你的结束括号是错误的。你应该有；而不是}）

您的inputfield有display:none，您应该删除它，因为$（“.enterotherstates”）.show（）；不会让它出现，只有父元素

接下来，您不需要对每一个进行迭代。它更容易、更快捷

$(document).ready(function()});

$(document).ready(function() {
    $("select").change(function() {
        if ($(this).val() === "WestBengal") {
            $(".enterotherstates").hide();
            $(".enterbengaldistricts").show();
        } else {
            $(".enterbengaldistricts").hide();
            $(".enterotherstates").show();
        }

    });
});

$(document).ready(function() {

    var otherStates = $(".enterotherstates");
    var bengal = $(".enterbengaldistricts");

    $("select").change(function() {
        if ($(this).val() === "WestBengal") {
            otherStates.hide();
            bengal.show();
        } else {
            bengal.hide();
            otherStates.show();
        }

    });
});

 $(document).ready(function(){
 $("#state").change(function() {
         if ($(this).val() === "WestBengal") {
            $(".otherdistricts").hide();
            $(".westbengaldistrict").show();
        }else{
           $(".otherdistricts").show();
            $(".westbengaldistrict").hide();
        }
     });
 });