整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
现效果
代码：
喽，小伙伴们！今天我们来聊一聊前端开发中的一个小技巧：如何用JavaScript自动设置下拉菜单的选项。你是不是也遇到过这样的需求？比如一个注册表单，根据用户选择的国家自动填充城市列表。那么，如何实现呢？跟我一起来看看吧！
想象一下，你正在开发一个旅游网站。用户在选择国家时，希望自动显示该国家的城市列表。我们可以通过JavaScript来实现这一动态效果。下面我们具体讲解两种实现方式。
这种方法简单粗暴，直接上代码！
首先，我们有一个简单的下拉菜单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属性。这种方法同样很直接，适合初学者理解。
依然使用刚才的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”就被选中了。
怎么样，是不是很简单？通过这两种方法，你可以轻松实现下拉菜单的自动选中功能。如果你有其他的业务场景，比如根据用户选择的不同项目自动填充不同的内容，这两种方法都能帮你轻松搞定！
不多说，直奔主题
<!--html代码-->
<div>
<ul>
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</li>
<li><a href="#about">关于</a></li>
</ul>
<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
</div>/*css代码*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #999;
overflow: hidden;
/* 注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。 来源链接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0 */
}
li {
float: left;
}
li a {
color: white;
padding: 14px 16px;
display: inline-block;
text-decoration: none;
}
li>a.active {
background-color: green;
}
li>a:hover:not(a.active),
.dropbtn:hover {
background-color: #555;
}
.dropdown-content {
display: none;
position: absolute;
/* 默认相对于<html>进行绝对定位 */
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}
.dropdown-content a {
color: black;
display: block;
/* 因为<a>标签不是块元素，min-width:100px不会生效 */
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: deepskyblue;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 0.9;/*下拉菜单半透明效果*/
}
/* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
/* ### 待完善 ###
因为.dropdown只用过一次，觉得可以删除<div class="dropdown"></div>来减少代码量，尝试 将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除<div class="dropdown"></div>后，鼠标悬停在“下拉菜单”上，会显示下拉菜单， 但无法选中菜单中的“链接 x”， ### 为什么？该如何完善？ ###
*/最终效果图：
*请认真填写需求信息，我们会在24小时内与您取得联系。
