哈喽，小伙伴们！
本日我们来聊一聊前端开拓中的一个小技巧：如何用JavaScript自动设置下拉菜单的选项。你是不是也碰着过这样的需求？比如一个注册表单，根据用户选择的国家自动添补城市列表。那么，如何实现呢？跟我一起来看看吧！
想象一下，你正在开拓一个旅游网站。用户在选择国家时，希望自动显示该国家的城市列表。我们可以通过JavaScript来实现这一动态效果。下面我们详细讲解两种实现办法。
方法一：设置value属性这种方法大略粗暴，直接上代码！
首先，我们有一个大略的下拉菜单HTML：
<select id="country-select"> <option value="china">China</option> <option value="usa">USA</option> <option value="france">France</option></select><select id="city-select"> <option value="beijing">Beijing</option> <option value="shanghai">Shanghai</option> <option value="guangzhou">Guangzhou</option></select>
现在，我们想要默认选中“China”和“Shanghai”，可以这样写：
const countrySelect = document.querySelector('#country-select')countrySelect.value = 'china'const citySelect = document.querySelector('#city-select')citySelect.value = 'shanghai'
是不是很大略？我们用querySelector找到select元素，然后设置它们的value属性为我们想要的选项值。页面一加载，“China”和“Shanghai”就当选中了。
方法二：设置selected属性另一种方法是设置详细选项的selected属性。这种方法同样很直接，适宜初学者理解。
依然利用刚才的HTML代码：
<select id="country-select"> <option value="china">China</option> <option value="usa">USA</option> <option value="france">France</option></select><select id="city-select"> <option value="beijing">Beijing</option> <option value="shanghai">Shanghai</option> <option value="guangzhou">Guangzhou</option></select>
我们通过以下JavaScript代码来实现：
const countrySelect = document.querySelector('#country-select')countrySelect.options[0].selected = true // China 是第一个选项const citySelect = document.querySelector('#city-select')citySelect.options[1].selected = true // Shanghai 是第二个选项
在这里，我们获取到所有的option元素，并通过索引来设置详细的选项。由于“China”是第一个选项，它的索引是0；“Shanghai”是第二个选项，它的索引是1。我们把它们的selected属性设置为true，这样页面加载时“China”和“Shanghai”就当选中了。
结尾怎么样，是不是很大略？通过这两种方法，你可以轻松实现下拉菜单的自动选中功能。如果你有其他的业务场景，比如根据用户选择的不同项目自动添补不同的内容，这两种方法都能帮你轻松搞定！
