Question

我使用下面的脚本来切换县菜单，我试图让它隐藏县菜单如果在页面上加载任何其他国家，选择“英国”，如果用户选择另一个国家，一旦页面有加载，问题是如果页面加载时选择“英国”，“县”菜单仍然隐藏，你必须先选择另一个国家，然后选择回“英国，以显示县名单。

<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>

Answer 1

您在第二个if语句中错过了.val()的来电！您当前正在将jQuery对象与String进行比较。

<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>

Answer 2

您需要获取所选的值，使用val()函数完成：

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

顺便说一句，您正在使用on函数创建change的委托事件：

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

很确定你不必......

为什么不：

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

Answer 3

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

$(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对象。如果它还不存在，那么你必须在加载后的某个时刻触发初始化代码并且确实存在。

请注意，在此上下文中没有理由使用"select#country"作为选择器，"#country"同样可以正常工作，但选择器引擎的评估速度更快。

Answer 4

您希望在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");
   });
});

Answer 5

如果有两个下拉（一个带有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示例的可见性：http://jsfiddle.net/x23nT/

.toggle功能无法正常工作

5 个答案: