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

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