JavaScript 设置和控制下拉菜单

寒笛过霜天 03-22 61

前言：

而今朋友们对“js中的select方法”都比较关心，朋友们都需要知道一些“js中的select方法”的相关知识。那么小编同时在网络上搜集了一些对于“js中的select方法””的相关内容，希望姐妹们能喜欢，各位老铁们快快来了解一下吧！

下拉菜单的属性

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><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 RemoveOption(Box,iNum){    var oForm = document.forms["myForm1"];    var oBox = oForm.elements[Box];    oBox.options[iNum] = null; //删除选项}</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="RemoveOption('ball',1);" /></form></body></html>

本文地址：http://www.longkongtuishu.com/ca8feDWsFDFsDAA.html

标签： #js中的select方法