整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
現(xiàn)效果
代碼：
嘍，小伙伴們！今天我們來聊一聊前端開發(fā)中的一個小技巧：如何用JavaScript自動設置下拉菜單的選項。你是不是也遇到過這樣的需求？比如一個注冊表單，根據(jù)用戶選擇的國家自動填充城市列表。那么，如何實現(xiàn)呢？跟我一起來看看吧！
想象一下，你正在開發(fā)一個旅游網(wǎng)站。用戶在選擇國家時，希望自動顯示該國家的城市列表。我們可以通過JavaScript來實現(xiàn)這一動態(tài)效果。下面我們具體講解兩種實現(xiàn)方式。
這種方法簡單粗暴，直接上代碼！
首先，我們有一個簡單的下拉菜單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>現(xiàn)在，我們想要默認選中“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代碼來實現(xiàn)：
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”就被選中了。
怎么樣，是不是很簡單？通過這兩種方法，你可以輕松實現(xiàn)下拉菜單的自動選中功能。如果你有其他的業(yè)務場景，比如根據(jù)用戶選擇的不同項目自動填充不同的內(nèi)容，這兩種方法都能幫你輕松搞定！
不多說，直奔主題
<!--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變?yōu)閴K元素 */
/* ### 待完善 ###
因為.dropdown只用過一次，覺得可以刪除<div class="dropdown"></div>來減少代碼量，嘗試 將.dropdown:hover .dropdown-content {display: block;} 修改為.dropbtn:hover+.dropdown-content {display: block;} 并刪除<div class="dropdown"></div>后，鼠標懸停在“下拉菜單”上，會顯示下拉菜單， 但無法選中菜單中的“鏈接 x”， ### 為什么？該如何完善？ ###
*/最終效果圖：
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
