Question

我目前有一些地方可以选择您在美国或加拿大的国家/地区，现在我在所有选择中都拥有所有美国州。当希望将其更改为加拿大时，我希望将此选择更改为加拿大的省份。这是我的代码：

<select class="select optional" id="state" name="order[billing_state]">

 <option value=""></option>

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

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

<option value="AS">AS</option>
etc...

这是国家部分：

<select class="select optional" id="country"> 

   <option selected="selected" value="USA">USA</option> 

   <option value="CANADA">CANADA</option> 

</select>

将选择更改为加拿大后，如何将州更改为加拿大省。

我还有其他几个选择，所以在将选择更改为某个选项后知道如何做某事对我很有帮助。

有什么可以帮助您的。

Answer 1

希望这会有所帮助。...

$('#country').change(function() {
  var country = $(this).val();
  $('#states').children().each(function(index, option) {
    var i = 0;
    if ($(option).attr('data-country') == country) {
      $(this).show();
      if (i == 0) {
        $(this).prop('selected', true);
      }
    } else {
      $(this).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
</select>

<select id="states">
  <option value="CA" data-country="usa">CA</option>
  <option value="Ontario" data-country="canada">Ontario</option>
  <option value="texas" data-country="usa">Texas</option>
  <option value="CA" data-country="canada">Alberta</option>
  <!--
  some more states.....
  -->
</select>

让我知道这是否可以解决您的问题或您遇到的任何问题...

Answer 2

假设您使用的是jQuery，应该可以通过以下代码实现：

<script>


 $(function() {        
  // updates the state select based on specified country
  function updateStateSelect(country) {   

    var states = []    
    if(country === 'USA') {    
      // states for usa
      states = [
        '',
        'AL',
        'AK',
        'AS', 
      ]
    }
    else {    
      // states for can
      states = [
        '',
        'BC', 
      ]
    }

    var stateSelect = $('#state');

    // empty any previous options in state select  
    stateSelect.empty();    

    // iterate states in selected country, and add options to 
    // state select
    for(var state of states) {
      stateSelect.append(
          $('<option value="' + state + '">' + state + '</option>'))
    }    
  }

  // configure your country select to update state select when changed
  $('#country')
  .change(function() {

    // when the country select is changed, update the state 
    // select based on current selected country 
    updateStateSelect($(this).val())
  })
  .change() // cause state select to be initialised by firing the 
            // change handler

})
</script>

此脚本应该可以插入到页面的任何位置，并且应该可以正常工作。此外，它将为当前所选国家/地区的每个州保留正确的选项值。

There's a working example here on jsFiddle for you to try

更改其他选择时更改选择选项

2 个答案: