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

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>

如果这能解决您的问题或您遇到的任何问题，请告诉我...