Javascript .切换功能无法正常工作

我使用下面的脚本切换County菜单，我试图让它隐藏County菜单，如果在页面加载时选择了除“英国”以外的任何国家，并且如果用户在页面加载后选择了另一个国家，问题是当页面加载“County”时是否选择了“英国”菜单仍处于隐藏状态，您必须先选择另一个国家，然后选择“返回英国”以显示县列表

<script type="text/javascript">
    $(document).ready(function(){
       $(".selectWrapper").on("change", "select#country", function(){
          $("select.county").toggle($(this).val() == "United Kingdom");
       });
    });

    </script>



    <script type="text/javascript">
    $(document).ready(function() {
           if($("select.country") != "United Kingdom") {
          $("select.county").toggle();
          }
    });
    </script>

$（文档）.ready（函数（）{
$（.selectWrapper”）。在（“更改”、“选择国家/地区”上，函数（）{
$（“select.county”）.toggle（$（this.val（）=“United Kingdom”）；
});
});
$（文档）.ready（函数（）{
如果（$（“选择国家”）！=“英国”）{
$（“select.country”）.toggle（）；
}
});

您需要获取select的所选值，这是通过

val（）

函数完成的：

$(document).ready(function() {
    if ($("select.country").val() != "United Kingdom") {
        $("select.county").toggle();
    }
});​

$(".selectWrapper").on("change", "select#country",

顺便说一下，您正在使用on函数创建一个

change

的委托事件：

$(document).ready(function() {
    if ($("select.country").val() != "United Kingdom") {
        $("select.county").toggle();
    }
});​

$(".selectWrapper").on("change", "select#country",

我很确定你不必

为什么不：

$("select#country").change(function(){
      $("select.county").toggle($(this).val() == "United Kingdom");
   });

---

使用此选项可获得正确的初始状态并响应更改：

$(document).ready(function(){
   $(".selectWrapper").on("change", "#country", function(){
      $("select.county").toggle($(this).val() == "United Kingdom");
   });
   // set the initial state
   $("select.county").toggle($("#country").val() == "United Kingdom");
});

这假定

#country

对象在页面加载时存在。如果它还不存在，则必须在加载后的某个点触发初始化代码，并且该代码确实存在

---

注意，在这种情况下，当

选择#国家时，没有理由使用
“选择#国家”
作为选择器“

同样有效，但选择器引擎的计算速度更快。

您希望在DOM就绪时首先切换，以设置正确的初始状态。然后，您希望在每次选择更改时进行切换。可能是这样的：

$(document).ready(function(){
   // Toggle on DOM-ready
   $("select.county").toggle($("#country").val() == "United Kingdom");

   // Then again on change
   $(".selectWrapper").on("change", "select#country", function(){
      $("select.county").toggle($("#country").val() == "United Kingdom");
   });
});

---

在第二条if语句中，您缺少对

.val（）

的调用！您当前正在将jQuery对象与字符串进行比较

<script type="text/javascript">
    $(document).ready(function(){
       $(".selectWrapper").on("change", "select#country", function(){
          $("select.county").toggle($(this).val() == "United Kingdom");
       });
    });

    </script>



    <script type="text/javascript">
    $(document).ready(function() {
           if($("select.country").val() != "United Kingdom") {
          $("select.county").toggle();
          }
    });
    </script>

$（文档）.ready（函数（）{
$（.selectWrapper”）。在（“更改”、“选择国家/地区”上，函数（）{
$（“select.county”）.toggle（$（this.val（）=“United Kingdom”）；
});
});
$（文档）.ready（函数（）{
如果（$（“select.country”）.val（）！=“英国”）{
$（“select.country”）.toggle（）；
}
});

如果有两个下拉列表（一个带有ID，一个带有类名），则可以执行以下操作：

$(document).ready(function(){
    $(".selectWrapper").on("change", "select#country", function(){
        $("select.county").toggle($(this).val() == "United Kingdom");
    });
    $("select#country").trigger("change");
});

使用.trigger执行select#country将运行的所有操作（如果您正在执行更多操作，则只需在

select.country

sample:

上切换可见性：

if（$（“select.country”）.val（）！=“United Kingdom”）{

并选择#country或select.country（取决于选择器中的正确者）这是一种看不到HTML的意大利面代码。总是显示代码的上下文。在Javascript中。它是HTML。