JavaScript 設置和控制下拉菜單

拉菜單的屬性

length 表示選項<option>的個數

selected 布爾值,表示選項<option>是否被選中

SelectedIndex 被選中的選項序號,如果沒有被選中則為-1,對于多選下拉菜單而言,返回被選中的第一個選項序號。從0開始計數

text 選項的文本(它是option專有的屬性)

value 選項的value值

type 下拉菜單的類型。單選返回select-one,多選返回select-multiple

options 獲取選項的數組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項

訪問選中項

下拉菜單(單選):

<html>
<head>
<title>下拉菜單，單選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.constellation;
    var iChoice = oSelectBox.selectedIndex; //獲取選中項
    alert("您選中了" + oSelectBox.options[iChoice].text); //下拉菜單，單選
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看選項" />
</form>
</body>
</html>

下拉菜單(多選):

<html>
<head>
<title>下拉菜單，多選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//遍歷整個下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數組中,可以用于單選的情況;
alert("您選了：" + aChoices.join()); //輸出結果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看選項" />
</form>
</body>
</html>

通用的訪問下拉菜單選中項的方法:

<script language="javascript">
function getSelectValue(Box){ //Box參數select標簽的ID值
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.elements[Box]; //根據參數相應的選擇下拉菜單
    if(oSelectBox.type == "select-one"){ //判斷是單選還是多選
    var iChoice = oSelectBox.selectedIndex; //獲取選中項
    alert("單選，您選中了" + oSelectBox.options[iChoice].text);
    }else{
    var aChoices = new Array();
    //遍歷整個下拉菜單
    for(var i=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected) //如果被選中
    aChoices.push(oSelectBox.options[i].text); //壓入到數組中
    alert("多選，您選了：" + aChoices.join()); //輸出結果
    }
}
</script>

函數使用方法:

<select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看選項" />

添加、替換、刪除選項

通過構造函數Option()直接添加value、text等信息，相當方便

var oOption = new Option(text,value,defaultSelected,selected)

defaultSelected為布爾型值:1(true)設置下拉式表單默認值,

selected為布爾值:1(true)表示被選中

最后兩項默認值為0,如果不希望添加的選項被默認選中則可以忽略,添加選項時通常將<select>列表的第length項直接設置為新的選項,即在末尾增加。

添加選項：

<html>
<head>
<title>添加選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加選項，參數為<select>標簽的ID值
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption; //在菜單末尾添加選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>

替換選項

如果下拉菜單中的序號為已經存在了的選項,添加時則會自動替換原有的選項

oBox.options[iNum]=oOption;//替換iNum個選項

<html>
<head>
<title>替換選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替換選項,參數Box為<select>的ID值,iNum為替換的選項序號;
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替換第iNum個選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="籃球替換為乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>

添加選項到具體位置

<html>
<head>
<title>添加到具體位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>

以上代碼IE7中雖然在正確的位置插入了選項,但內容卻沒有顯示出來(bug問題)

兼容性更好的代碼,使用方法與以上相同;

<script language="javascript">
function AddOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    //兼容IE7，先添加選項到最后，再移動
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>

注意：IE9已經解決了bug問題

刪除下拉菜單的選項:

刪除下拉菜單中的某個選項時相對最簡單的,只需要將這個選項設置為null即可

bBox.options[iNum]=null;

不多說，直奔主題

<!--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”， ### 為什么？該如何完善？ ###    
			 */

最終效果圖：

TML

<!-- Content Wrapper. Contains page content -->
<section class = "content-header">
    <div class = "container-fluid">
        <div class = "row mb-2">
            <div class = "col-sm-6">
                <h1>Inbuilding Analyse-Basic Setup</h1>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class = "content">
    <div class = "container-fluid">
        <div class = "row">
            <div class = "col-md-12">
                <div class = "card">
                    <div class = "card-header p-2">
                        <ul class = "nav nav-tabs">
                            <li class = "nav-item"><a class = "nav-link active" href = "javascript：void(0)"
                                                      data-toggle = "tab"
                                                      link = "child_page/inb_basic_task.html">Task Maintaince</a></li>//默認加載的頁面a class里要加active
                            <li class = "nav-item"><a class = "nav-link" href = "javascript：void(0)" data-toggle = "tab"
                                                      link = "鏈接1">Coverage</a>
                            </li>
                            <li class = "nav-item"><a class = "nav-link" href = "javascript：void(0)" data-toggle = "tab"
                                                      link = "鏈接2">Sort Maintaince</a>
                            </li>
                            <li class = "nav-item"><a class = "nav-link" href = "javascript：void(0)" data-toggle = "tab"
                                                      link = "鏈接3">H/C Identify</a>
                            </li>
                            <li class = "nav-item"><a class = "nav-link" href = "javascript：void(0)" data-toggle = "tab"
                                                      link = "鏈接4">Report List</a>
                            </li>

                        </ul>
                    </div><!-- /.card-header -->
                    <div class = "card-body">
                        <div class = "tab-content">
                            <div class = "active tab-pane" id = "pane">//這里放TAB加載的頁面
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>

Jquery

在線咨詢

上一篇：HTML5的學習技巧
下一篇：CSS變量 var()的用法是什么？CSS變量 var()的用法詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 設置和控制下拉菜單

您的項目需求