javascript操作select

最新推荐文章于 2024-08-04 16:33:59 发布

iteye_3224

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量89

点赞数

文章标签： javascript xhtml ViewUI

1.判断select选项中是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { isExit = true; break; } } return isExit; } 2.向select选项中加入一个Item function jsAddItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { alert("该Item的Value值已经存在"); } else { var varItem = new Option(objItemText, objItemValue); objSelect.options.add(varItem); alert("成功加入"); } } 3.从select选项中删除一个Item function jsRemoveItemFromSelect(objSelect, objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { objSelect.options.remove(i); break; } } alert("成功删除"); } else { alert("该select中不存在该项"); } } 4.删除select中选中的项 function jsRemoveSelectedItemFromSelect(objSelect) { var length = objSelect.options.length - 1; for(var i = length; i >= 0; i--){ if(objSelect[i].selected == true){ objSelect.options[i] = null; } } } 5.修改select选项中 value="paraValue"的text为"paraText" function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { objSelect.options[i].text = objItemText; break; } } alert("成功修改"); } else { alert("该select中不存在该项"); } } 6.设置select中text="paraText"的第一个Item为选中 function jsSelectItemByValue(objSelect, objItemText) { //判断是否存在 var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].text == objItemText) { objSelect.options[i].selected = true; isExit = true; break; } } //Show出结果 if (isExit) { alert("成功选中"); } else { alert("该select中不存在该项"); } } 7.设置select中value="paraValue"的Item为选中 document.all.objSelect.value = objItemValue; 8.得到select的当前选中项的value var currSelectValue = document.all.objSelect.value; 9.得到select的当前选中项的text var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; 10.得到select的当前选中项的Index var currSelectIndex = document.all.objSelect.selectedIndex; 11.清空select的项 document.all.objSelect.options.length = 0;

下面是测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript select结合_脚本之家_www.jb51.net</title> <script language="javascript" type="text/javascript"> function vtOption(){ var s1=document.getElementById("select1"); var sV=s1.options[s1.selectedIndex].value; var sT=s1.options[s1.selectedIndex].text; alert(sV+"\n"+sT); } function addOption1(){ var s1=document.getElementById("select1"); var newOp1=new Option; newOp1.value="3"; newOp1.text="这是3"; var newOp2=new Option; newOp2.value="4"; newOp2.text="这是4"; s1.add(newOp1); s1.add(newOp2); } function addOption2(){ var s1=document.getElementById("select1"); for(var i=3;i<5;i++){ var newOp1=new Option("这是"+i,i); //var newOp1=new Option; //newOp1.value=i; //newOp1.text="这是"+i; s1.add(newOp1); } } function addOption3(){ var s1=document.getElementById("select1"); s1.options.length=0;//清除以前的选项 for(var i=3;i<7;i++){ var newOp1=new Option("这是"+i,i); //var newOp1=new Option; //newOp1.value=i; //newOp1.text="这是"+i; s1.add(newOp1); } } function remOption(){ var s1=document.getElementById("select1"); for(var i=s1.options.length;i>=0;i--){ s1.options.remove(i); } } function remOptionSelected(){ var s1=document.getElementById("select1"); var i=s1.selectedIndex; //alert(i); s1.options.remove(i); } </script> </head> <body> <select name="select" id="select1"> <option value="1">这是1</option> <option value="2">这是2</option> </select> <a href="javascript:vtOption()">取值</a> <a href="javascript:addOption1()">增加1</a> <a href="javascript:addOption2()">增加2</a> <a href="javascript:addOption3()">增加3</a> <a href="javascript:remOption()">删除选项</a> <a href="javascript:remOptionSelected()">删除选取选项</a> </body> </html>

iteye_3224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript操作select

1.判断select选项中是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i &lt; objSelect.options.length; i++) { if (objSelect.options[i]...
复制链接

扫一扫