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

我目前有一些东西，你选择你的国家在美国或加拿大，现在我有在另一个选择我希望这个选择改变到加拿大省时，它被更改为加拿大所有的美国州。这是我的密码：

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

艾尔
AK
像
等

以下是国家部分：

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

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

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

</select>

美国
加拿大

当我将select更改为Canada时，我将如何让各州更改为加拿大省份

我也有一些其他的选择，所以知道如何在选择改变为某个选项时做一些事情对我非常有帮助

---

任何有帮助的，谢谢。

希望这会有帮助

$（'#country'）。更改（函数（）{
var country=$（this.val（）；
$（'#states'）.children（）.each（函数（索引，选项）{
var i=0；
if（$（选项）.attr（'data-country'）==国家）{
$（this.show（）；
如果（i==0）{
$（this.prop（'selected'，true）；
}
}否则{
$（this.hide（）；
}
});
});

美国
加拿大
加利福尼亚州
安大略
得克萨斯州
阿尔伯塔省
假设您使用的是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>


$（函数（）{
//根据指定的国家/地区更新状态选择
函数更新状态选择（国家）{
变量状态=[]
如果（国家==‘美国’{
//美国各州
国家=[
'',
“AL”，
“AK”，
“作为”，
]
}
否则{
//can的状态
国家=[
'',
“BC”，
]
}
var stateSelect=$（“#state”）；
//在“选择”状态中清空之前的所有选项
stateSelect.empty（）；
//迭代选定国家/地区的状态，并将选项添加到
//州选择
for（状态变量状态）{
stateSelect.append(
$（''+状态+''）
}    
}
//配置您的国家/地区选择以在更改时更新状态选择
$（“#国家”）
.change（函数（）{
//更改国家/地区选择后，更新状态
//根据当前所选国家/地区进行选择
updateStateSelect（$（this）.val（））
})
.change（）//通过触发
//变更处理程序
})

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

@maxymwojnowsky有什么问题吗？我在美国各州和加拿大添加了数据国家的内容，它只是将加拿大各省和州都包含在select中，并且没有隐藏任何选项它在上面的代码段中工作。当我将“选择”更改为“加拿大”并单击“州”时，我确实正确地解决了您的问题。选择“无选项”弹出窗口我无法单击iTunesCught SyntaxError:意外标记]第一个定义的州上的标记（州=[“”，'AL'，'AK'，'AS'，…]）我做到了，这就是我犯的错误。this.val不是一个函数它无法识别name=billing_state，所以我将其更改为（“#state”），然后我得到了这个错误。。。未定义值。。它指向$（''+value+''）这。。。updateStateSelect（$（this）.val（））Hi请在此处查看使用工作JSFIDLE的更新