问题描述:

I'm having a small issue. On my registration form I have a few select menus, specifically for countries and their states.

For most countries, except for the US and Canada, there are no states.

So I have 2 divs. One for Country, which appears all the time, and one for States (US & Canada).

  1. When the user selects a country other than the US or Canada everything is fine and the state div stays hidden.

  2. However, when the user selects the US or Canada I want their appropriate div to appear beneath.

Is there any way to do this?

<div class="dv_country">

<select name="country" class="form-control">

<option value="" selected="selected">Select Country</option>

<option value="United States">United States</option>

<option value="United Kingdom">United Kingdom</option>

<option value="Afghanistan">Afghanistan</option>

<option value="Albania">Albania</option>

<option value="Algeria">Algeria</option>

</select>

</div>

<div class="dv_state_US">

<select name="state" class="form-control">

<option value="AL">Alabama</option>

<option value="AK">Alaska</option>

<option value="AZ">Arizona</option>

<option value="AR">Arkansas</option>

<option value="CA">California</option>

</select>

</div>

<div class="dv_state_CA">

<select name="state" class="form-control">

<option value="AB">Alberta</option>

<option value="BC">British Columbia</option>

<option value="MB">Manitoba</option>

<option value="NB">New Brunswick</option>

</select>

</div>

CSS

.dv_state_US

{

display:none;

}

.dv_state_CA

{

display:none;

}

网友答案:

This one is nice and extendible - just add any more countries to the end, it'll happily deal with showing and hiding them at need.

It would be slightly nicer with an id or class on the country select element, but works the same regardless :-)

$("select[name=\"country\"]").on("change", function () {
    var country = $(this).val();
    $(".dv_state_US").toggle(country === "United States");
    $(".dv_state_CA").toggle(country === "Canada");
});
网友答案:

$('select[name="country"]').on('change click', function () {
  var country = $(this).val();
  $('.autoState').css('display', 'none');
  if(country === 'United States') {
    $('.dv_state_US').css('display', 'block');
  } else if(country === 'Canada') {
    $('.dv_state_CA').css('display', 'block');
  }
});
.autoState { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dv_country">
        <select name="country" class="form-control"> 
                <option value="" selected="selected">Select Country</option> 
                <option value="United States">United States</option> 
                <option value="United Kingdom">United Kingdom</option> 
                <option value="Afghanistan">Afghanistan</option> 
                <option value="Albania">Albania</option> 
                <option value="Algeria">Algeria</option>            
                <option value="Canada">Canada</option> 
        </select>
</div>

<div class="dv_state_US autoState">
            <select name="state" class="form-control"> 
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>    
                    <option value="CA">California</option>
            </select>
    </div>

<div class="dv_state_CA autoState">
            <select name="state" class="form-control"> 
                <option value="AB">Alberta</option>
                <option value="BC">British Columbia</option>
                <option value="MB">Manitoba</option>
                <option value="NB">New Brunswick</option>
            </select>
</div>
网友答案:

You can do that simply with jQuery.
In the problem description you say Canada but i can't find Canada anywhere in the html so i used United Kingdom.

$(document).ready(function () {

    $(".country-select").change(function () {
        
        if($( ".country-select option:selected" ).text() == "United States")
            $(".dv_state_US").show();
        else
            $(".dv_state_US").hide();
        
        if($( ".country-select option:selected" ).text() == "United Kingdom")
            $(".dv_state_CA").show();
        else
            $(".dv_state_CA").hide();
        
    });

});
.dv_state_US {
    display:none;
}
.dv_state_CA {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dv_country">
    <select name="country" class="form-control country-select">
        <option value="" selected="selected">Select Country</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
    </select>
</div>
<div class="dv_state_US">
    <select name="state" class="form-control">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
    </select>
</div>
<div class="dv_state_CA">
    <select name="state" class="form-control">
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
    </select>
</div>
网友答案:

$(function() { // DOM Loaded event listener
  var dv_country = $("#country");
  
  var showDuration = 0;
  
  function display_states_US() {
     $(".dv_state_US").show(showDuration);
  }
  
  function display_states_CA() {
     $(".dv_state_CA").show(showDuration); 
  }
  
  function hide_all() {
     $(".dv_state_US").hide(0); 
     $(".dv_state_CA").hide(0);
  }
  
  hide_all();
  
  dv_country.change(function() {
    var country_selected = $(this).val();
    
    if (country_selected == "United States") {
      hide_all();
      display_states_US();
    }
    else if (country_selected == "United Kingdom") {
      hide_all();
      display_states_CA(); 
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dv_country">
  <select id="country" name="country" class="form-control"> 
    <option disabled="disabled" selected value="" selected="selected">-- Select Country</option> 
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option> 
    <option value="Afghanistan">Afghanistan</option> 
    <option value="Albania">Albania</option> 
    <option value="Algeria">Algeria</option> 
  </select>
</div>

<div class="dv_state_US">
  <select name="state" class="form-control"> 
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>    
    <option value="CA">California</option>
  </select>
</div>

<div class="dv_state_CA">
  <select name="state" class="form-control"> 
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
  </select>
</div>
网友答案:

I'm not sure what JavaScript you already have in place, however you had jQuery tagged as well, so the following might be of use:

    $(function () {
        var class_map = {
            "United States" : 'dv_state_US',
            "Canada" : 'dv_state_CA',
        };

        $('.dv_country select').change (function () {
            var country = $(this).val ();
            for (var x in class_map) {
                var className = '.'+class_map[x];
                (x == country)
                    ? $(className).show ()
                    : $(className).hide ();
            }
        });
    });

Using an array to map the classes will make it easy to expand, however if you were to give the new drop downs a class predictable by the value of the original select it wouldn't be needed.

相关阅读:
Top