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代碼：

<!DOCTYPE html><html><head>

<title>頭部導航條制作</title>

</head>

<body>

<li><a href="#">web前端</a></li>

</ul>

</div>

</body>

</html>

用無序列表制作頭部導航條：

無序列表是上下布局排列的，那我們需要思考的是讓他左右布局的方式排列
左右排列的方式我們所用的是float:left;浮動的方法讓li左右布局
CSS樣式：

.navbox{
width:960px;
height:40px;
margin:20pxauto;
background:#08c;
}
.navbox >ul>li{
float: left;
width:160px;
height:40px;
line-height:40px;
text-align: center;
font-size:16px;
}

鼠標移入時實現顏色的變換

HTML代碼：

<li><a href="#">web前端</a></li>

</ul></div>

思路：

鼠標移入時每個<li>顯示為另一種顏色background: #00bfff;

css代碼：

.navbox ul li a{ display: block; color: #fff; background: #08c;}.navbox ul li a:hover{ text-decoration: none; background: #00bfff;}

下拉菜單實現

html：

<li><a href="#">web前端</a>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

在一級菜單web前端下實現二級菜單<ul class="subnav">

html
css
JavaScript
當鼠標移入菜單時web前端時顯示二級菜單，移出時隱藏；
CSS代碼實現：

.subnav{ display: none;}/*鼠標沒有移入“web前端”選項欄時二級菜單隱藏*/.navbox ul li:hover .subnav{ display: block;}/*當鼠標移入“web前端”選項欄時顯示二級菜單*/

三級菜單實現

HTML

<li><a href="#">web前端</a>

</ul>

</li>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

前面與二級菜單思路相似唯一不同的是三級菜單顯示的位置。

我們看看css的絕對定位與相對定位這篇文章

CSS代碼：

.subnav>li{ position: relative;}.threenav{ position: absolute; top: 0; left: 160px; width: 160px;}.subnav, .threenav{ display: none;}.subnav li:hover .threenav{ display: block;}

最后實現的效果如下圖：

家好，今天給大家介紹一款，css+js實現的下拉百葉窗式彈出菜單html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

下拉動畫非常自然，而且還可以收折恢復到初始狀態（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：20218，需要的朋友，訪問下面鏈接后，搜索20218，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：「HTML」什么是 HTML 中的 div 標簽
下一篇：HTML詳細介紹1

您的項目需求

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

整合營銷服務商

JavaScript 設置和控制下拉菜單

家好，今天給大家介紹一款，css+js實現的下拉百葉窗式彈出菜單html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

下拉動畫非常自然，而且還可以收折恢復到初始狀態（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：20218，需要的朋友，訪問下面鏈接后，搜索20218，即可獲取。

就愛UI - 分享UI設計的點點滴滴

您的項目需求

家好，今天給大家介紹一款，css+js實現的下拉百葉窗式彈出菜單html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

下拉動畫非常自然，而且還可以收折恢復到初始狀態（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：20218，需要的朋友，訪問下面鏈接后，搜索20218，即可獲取。