Javascript 如何操作/设置对下拉菜单选择的反应？

我试图显示第二个下拉菜单，这取决于第一个下拉菜单选择的反应/选择。我想显示第二个下拉菜单，这取决于第一个下拉菜单的选择

我尝试使用if语句，但这些语句并没有帮助我前进

    <select id="countries">
        <option id="US" value="unitedStates" > United States </option>
        <option id="CA" value="canada" > Canada </option>
    </select>

<script type="text/javascript">
    //Global variable for the Countries drop down menu
    var country = document.getElementById('countries');

</script>

美国
加拿大
//国家/地区下拉菜单的全局变量
var country=document.getElementById（'countries'）；

我想让第二个下拉菜单显示美国或加拿大的城市列表，具体取决于所选的城市。

请尝试以下代码：

var城市={
美国：[“纽约”、“华盛顿”]，
加拿大：[“多伦多”、“渥太华”]
}
var country=document.getElementById（'countries'）；
var city=document.getElementById（'cities'）；
country.onchange=（）=>{
设v=城市[国家价值]；
city.innerHTML=v？v.map（c=>`${c}`）：''；
}

美国
加拿大

这非常有效，谢谢！有没有办法将默认选择设置为美国？因此，当页面最初加载时，它被设置为美国？不是第一个值，否。我尝试在选择前选择

项

（如下）

美国-加拿大

，但这不起作用