整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML多層級(jí)下拉框

          現(xiàn)效果

          代碼:

          嘍,小伙伴們!今天我們來(lái)聊一聊前端開發(fā)中的一個(gè)小技巧:如何用JavaScript自動(dòng)設(shè)置下拉菜單的選項(xiàng)。你是不是也遇到過(guò)這樣的需求?比如一個(gè)注冊(cè)表單,根據(jù)用戶選擇的國(guó)家自動(dòng)填充城市列表。那么,如何實(shí)現(xiàn)呢?跟我一起來(lái)看看吧!

          業(yè)務(wù)場(chǎng)景

          想象一下,你正在開發(fā)一個(gè)旅游網(wǎng)站。用戶在選擇國(guó)家時(shí),希望自動(dòng)顯示該國(guó)家的城市列表。我們可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)這一動(dòng)態(tài)效果。下面我們具體講解兩種實(shí)現(xiàn)方式。

          方法一:設(shè)置value屬性

          這種方法簡(jiǎn)單粗暴,直接上代碼!

          首先,我們有一個(gè)簡(jiǎ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)在,我們想要默認(rèn)選中“China”和“Shanghai”,可以這樣寫:

          const countrySelect = document.querySelector('#country-select')
          countrySelect.value = 'china'
          
          const citySelect = document.querySelector('#city-select')
          citySelect.value = 'shanghai'

          是不是很簡(jiǎn)單?我們用querySelector找到select元素,然后設(shè)置它們的value屬性為我們想要的選項(xiàng)值。頁(yè)面一加載,“China”和“Shanghai”就被選中了。

          方法二:設(shè)置selected屬性

          另一種方法是設(shè)置具體選項(xiàng)的selected屬性。這種方法同樣很直接,適合初學(xué)者理解。

          依然使用剛才的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>

          我們通過(guò)以下JavaScript代碼來(lái)實(shí)現(xiàn):

          const countrySelect = document.querySelector('#country-select')
          countrySelect.options[0].selected = true // China 是第一個(gè)選項(xiàng)
          
          const citySelect = document.querySelector('#city-select')
          citySelect.options[1].selected = true // Shanghai 是第二個(gè)選項(xiàng)

          在這里,我們獲取到所有的option元素,并通過(guò)索引來(lái)設(shè)置具體的選項(xiàng)。由于“China”是第一個(gè)選項(xiàng),它的索引是0;“Shanghai”是第二個(gè)選項(xiàng),它的索引是1。我們把它們的selected屬性設(shè)置為true,這樣頁(yè)面加載時(shí)“China”和“Shanghai”就被選中了。

          結(jié)尾

          怎么樣,是不是很簡(jiǎn)單?通過(guò)這兩種方法,你可以輕松實(shí)現(xiàn)下拉菜單的自動(dòng)選中功能。如果你有其他的業(yè)務(wù)場(chǎng)景,比如根據(jù)用戶選擇的不同項(xiàng)目自動(dòng)填充不同的內(nèi)容,這兩種方法都能幫你輕松搞定!

          不多說(shuō),直奔主題

          <!--html代碼-->
          <div>
          			<ul>
          				<li><a href="#home" class="active">主頁(yè)</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">關(guān)于</a></li>
          			</ul>
          			<h3>導(dǎo)航欄上的下拉菜單</h3>
          			<p>鼠標(biāo)移動(dòng)到 "下拉菜單" 鏈接先顯示下拉菜單。</p>
          		</div>
          /*css代碼*/
          ul {
          			     list-style-type: none;
          			     margin: 0;
          			     padding: 0;
          			     background-color: #999;
          			     overflow: hidden;
          			     /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(當(dāng)li{float:left}時(shí))。         來(lái)源鏈接: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;
          			     /* 默認(rèn)相對(duì)于<html>進(jìn)行絕對(duì)定位 */
          			     background-color: #f9f9f9;
          			     min-width: 100px;
          			     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
          			 }
          			
          			 .dropdown-content a {
          			     color: black;
          			     display: block;
          			     /* 因?yàn)?lt;a>標(biāo)簽不是塊元素,min-width:100px不會(huì)生效 */
          			 }
          			
          			 .dropdown-content a:hover {
          			     background-color: #f1f1f1;
          			     color: deepskyblue;
          			 }
          			
          			 .dropdown:hover .dropdown-content {
          			     display: block;
                     opacity: 0.9;/*下拉菜單半透明效果*/
          			 }
          			
          			 /* 中間的空格表示,鼠標(biāo)懸念在.dropdown上時(shí),dropdown的子元素.dropdown-content變?yōu)閴K元素 */
          			 /* ### 待完善 ###   
          			    因?yàn)?dropdown只用過(guò)一次,覺得可以刪除<div class="dropdown"></div>來(lái)減少代碼量,嘗試  將.dropdown:hover .dropdown-content {display: block;} 修改為.dropbtn:hover+.dropdown-content {display: block;} 并刪除<div class="dropdown"></div>后,鼠標(biāo)懸停在“下拉菜單”上,會(huì)顯示下拉菜單, 但無(wú)法選中菜單中的“鏈接 x”, ### 為什么?該如何完善? ###    
          			 */

          最終效果圖:


          主站蜘蛛池模板: 末成年女A∨片一区二区| 一区二区三区四区视频| 日本一区二区三区日本免费| 一区二区三区在线观看视频 | 无码人妻AV免费一区二区三区| 日韩一区二区三区射精| 国产成人av一区二区三区在线观看| 精品一区二区三区无码视频| 久久国产午夜精品一区二区三区| 亚洲AV无码一区二区三区系列| AA区一区二区三无码精片 | 一本岛一区在线观看不卡| 日韩在线一区二区三区免费视频| 久久久久女教师免费一区| 国产精品视频一区二区三区四| 福利片免费一区二区三区| 色天使亚洲综合一区二区| 亚洲乱码一区二区三区国产精品| 日本精品一区二区三区在线观看| 无码少妇一区二区| 亚洲毛片αv无线播放一区| 国产免费一区二区三区免费视频 | 亚洲福利一区二区精品秒拍| 亚洲国产精品一区二区久久| 亚洲AV日韩AV一区二区三曲| 一区二区三区四区无限乱码| 无码精品一区二区三区免费视频| 久久久无码精品人妻一区| 亚洲午夜精品第一区二区8050| 精品一区二区三区波多野结衣| 国产一区二区在线视频播放| 无码国产精成人午夜视频一区二区| 人妻互换精品一区二区| 91福利国产在线观看一区二区 | 国模吧无码一区二区三区| 亚洲AV噜噜一区二区三区 | 亚洲一区在线视频观看| 亲子乱av一区二区三区| 国产一区二区在线视频播放| 亚洲一区二区三区免费视频| 一区二区乱子伦在线播放|