html关联下拉菜单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></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></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>

通用的访问下拉菜单选中项的方法:

函数利用方法:

添加、更换、删除选项

通过布局函数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></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></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></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></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>