表单form的相关知识
设置下拉列表框
下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。
下拉列表框默认只能选中一项，若要设置为可以选中多项，则
type 属性：javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。
type 属性的值为：select-multiple 或 select-one （注意：下拉列表框的类型由multiple 属性控制）
1.查看下拉列表框的选项（单选项 & 多选项）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script language="javascript"> function getSelectValue(_myselect){ var oForm = document.forms["myForm1"]; //根据参数(下拉列表框的name属性值)获得下拉菜单项 var oSelectBox = oForm.elements[_myselect]; //判断是单选还是多选 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> <form method="post" name="myForm1"> <select id="mysel" name="mysel" multiple="multiple" style="height:60px;"> <option value="a">AA</option> <option value="b">BB</option> <option value="c">CC</option> </select> <input type="button" onclick="getSelectValue('mysel')" value="查看选项" /> |
2.添加下拉列表框的选项
追加新选项到末尾
1 2 3 4 5 6 7 8 | <script language="javascript"> function AddOption(Box){ //追加选项到末尾 var oForm = document.forms["myForm1"]; var oBox = oForm.elements[Box]; var oOption = new Option("乒乓球","Pingpang"); oBox.options[oBox.options.length] = oOption; } </script> |
插入新选项到指定位置
1 2 3 4 5 6 7 8 9 10 11 | <script language="javascript"> function AddOption(_select,_num){ var oForm = document.forms["myForm1"]; var oBox = oForm.elements[_select]; var oOption = new Option("text值","value值"); //兼容IE7，先添加选项到最后，再移动 oBox.options[oBox.options.length] = oOption; oBox.insertBefore(oOption,oBox.options[_num]); } </script> <input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" /> |
注意：如果直接使用insertBefore( ) 方法插入选项，将会在IE 中出现一个空选项的bug。为了解决IE 的这个bug ，只能使用先追加新选项到末尾，然后再使用insertBefore( ) 方法移动到具体位置的办法。
类似这样：为了跳过浏览器的某些bug 或限制，实现预定目的的小技巧，通常称之为hack 。
3.替换某一选项
1 2 3 4 5 6 7 8 9 10 | <script language="javascript"> //替换选项 function ReplaceOption(_select,_num){ var oForm = document.forms["myForm1"]; var oBox = oForm.elements[_select]; var oOption = new Option("text值","value值"); oBox.options[_num] = oOption; //替换第_num 个选项 } </script> <input type="button" value="替换选项" onclick="ReplaceOption('selName',1);" /> |
通过oBox.options[_num] = oOption 直接将创建的新选项替换掉指定位置的选项。
4.删除某一选项
1 2 3 4 5 6 7 8 9 10 11 12 | <script language="javascript"> function RemoveOption(_select,_num){ var oForm = document.forms["myForm1"]; var oBox = oForm.elements[_select]; oBox.options[_num] = null; //删除选项 } </script> </head> <body> <select id="mysel" name="mysel" multiple="multiple"> ...... <input type="button" value="删除选项" onclick="RemoveOption('mysel',1);" /> |
直接通过oBox.options[_num] = null 删除选项。
原文地址：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html
欢迎留言