Question

我遇到了一个小问题。在我的注册表格中，我有一些选择菜单，特别是针对国家及其州。

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

所以我有2个div。一个国家，一直出现，一个国家（美国和加拿大）。

当用户选择美国或加拿大以外的国家/地区时，一切正常并且状态div保持隐藏状态。
但是，当用户选择美国或加拿大时，我希望他们的相应div显示在下方。

有没有办法做到这一点？

try:
agent.get("http://dsjkhbgdfb.comsfg")
except socket.error:
pass # Basically, ignore the error

CSS

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

Answer 1

＆＃13;

document.documentElement.addEventListener('click', function(evt) {
  console.log(evt.path);
});

＆＃13;

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

＆＃13;

.autoState { display:none; }

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

.dv_state_US {
    display:none;
}
.dv_state_CA {
    display:none;
}

＆＃13;

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

＆＃13;

Answer 3

这个很好且可扩展 - 只需添加更多国家到最后，它会愉快地处理显示和隐藏它们的需要。

在国家/地区选择元素上使用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 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 ();
            }
        });
    });

使用数组映射类将使其易于扩展，但是如果您要为新的下拉列表提供可通过原始选择的值预测的类，则不需要它。

Jquery - 从“选择”菜单中选择时显示div

5 个答案: