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设计的点点滴滴

您的项目需求