jquery - 從選擇菜單中選擇時使div出現

Question

我有一個小問題。在我的註冊表格中，我有幾個選擇菜單，專門針對國家和他們的州。

對於大多數國家，除美國和加拿大外，沒有州。

所以我有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; 
} 

Answer 1

這一個是好的，可擴展 - 只需添加更多的國家到最後，它會高興地處理和顯示在需要隱藏它們。

這將是該國選擇的元素上id或class略微更好，但不管工作原理是一樣:-)

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

Answer 2

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

Answer 3

你可以簡單地使用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>

Answer 4

$(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修改演出持續時間。

Answer 5

我不知道的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(); 
      } 
     }); 
    }); 

使用數組的類映射將使它容易擴展，但是如果你要給新的下拉菜單選擇一個可預測的原始選擇值，就不需要它了。