2015-07-01 13 views
0

我有一个小问题。在我的注册表格中,我有几个选择菜单,专门针对国家和他们的州。jquery - 从选择菜单中选择时使div出现

对于大多数国家,除美国和加拿大外,没有州。

所以我有2个div。一个国家,一直出现,一个国家(美国&加拿大)。

  1. 当用户选择除美国或加拿大以外的其他国家时,一切都很好,并且状态div保持隐藏状态。

  2. 但是,当用户选择美国或加拿大我希望他们适当的div出现在下面。

有没有办法做到这一点?

<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; 
} 
+0

您忘记了链接相关的CSS和JavaScript代码。 –

+0

唯一的css现在有 - 显示:无; – Jimmy

+0

发布JavaScript/jQuery。 – Wazaaaap

回答

0

这一个是好的,可扩展 - 只需添加更多的国家到最后,它会高兴地处理和显示在需要隐藏它们。

这将是该国选择的元素上idclass略微更好,但不管工作原理是一样:-)

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

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

1

你可以简单地使用jQuery。
在问题描述中你说加拿大,但我无法在html的任何地方找到加拿大,所以我用英国。

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

0

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

下面是一个简单的例子如何用JQuery做到这一点。您可以使用变量showDuration修改演出持续时间。

0

我不知道的JavaScript你已经到位,但是你有jQuery的标签一样,所以下面可能是有用的:

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

使用数组的类映射将使它容易扩展,但是如果你要给新的下拉菜单选择一个可预测的原始选择值,就不需要它了。