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

Question

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

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

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

jsFiddle上有一个有效的示例供您尝试