.toggle功能无法正常工作

Question

I use the script below to toggle the County menu, I am trying to get it to hide the county menu if on page load any country other the "United Kingdom" is selected and if the user selects another country once the page has loaded, problem is if "United Kingdom" is selected when the page loads the "county" menu is still hidden and you have to select another country first then select back to "United Kingdom to get the County list to show.

<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

You are missing the call of your .val() in the second if statement ! You are currently comparing an jQuery Object with a 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

You need to get the selected value of the select, it is done with the val() function:

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

By the way, you're creating a delegate event of change with the on function:

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

Pretty sure that you don't have to...

Why not:

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

Answer 3

Use this to get the initial state correct and respond to changes:

$(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");
});

This assumes that the #country object exists at page load time. If it doesn't exist yet, then you will have to trigger the initialization code at some point after it is loaded and does exist.

Note, there is no reason in this context to use "select#country" as the selector when "#country" will work just as well yet be faster for the selector engine to evaluate.

Answer 4

You want to toggle first when the DOM is ready, to set the proper initial state. Then you want to toggle every time the select changes. It would be something like:

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

if there is two drop downs (one with an ID and one with a class name) then you could do:

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

using .trigger to do everything the select#country will run (if you are doing more then just toggle visibility on select.country sample: http://jsfiddle.net/x23nT/