你的位置:首页 > Java教程

[Java教程]javaScript的select元素和option的相关操作


 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html "http://www.w3.org/1999/xhtml"> 3 <head> 4   <title></title> 5   <!--添加jquery--> 6   <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> 7   <script type="text/javascript"> 8     $(function () { 9       createSelect("select", "addSel"); 10       addOption("addSel", "first", "第一个数据"); 11       addOption("addSel", "secord", "第二个数据"); 12       addOption("addSel", "three", "第三个数据"); 13       addOption("addSel", "four", "第四个数据"); 14       addOption("addSel", "fives", "第五个数据"); 15       removeOneByIndex("addSel", 0); 16       removeOneByObj("addSel", "secord"); 17  18       //添加一个option更改事件 调用自己写的方法 19       $("#addSel").change(function () { 20         alert("旧文本:"+getOptionText("addSel") + "旧Value:" + getOptionValue("addSel")); 21         editOptions("addSel", "新文本","新Value"); //注意:不传value值的时候 value值默认为text的值 22         alert("新文本:" + getOptionText("addSel") + "新Value:" + getOptionValue("addSel")); 23       }) 24     }) 25  26     //动态创建带id的元素 27     function createSelect(element, id) { 28       var select = document.createElement(element); 29       select.id = id; 30       document.body.appendChild(select); 31     } 32  33     //根据select的id 添加选项option 34     function addOption(selectID,value,text) { 35       //根据id查找对象,  36       var obj = document.getElementById(selectID);  37       obj.options.add(new Option(text, value)); //这个兼容IE与firefox  38     } 39  40     //删除所有选项option 41     function removeAll(selectID) { 42       var obj = document.getElementById(selectID); 43       obj.options.length = 0; 44     } 45  46     //根据 index 值删除一个选项option 47     function removeOneByIndex(selectID,index) { 48       var obj = document.getElementById(selectID); 49       //index,要删除选项的序号,这里取当前选中选项的序号  50       //var index = obj.selectedIndex;//获取选中的选项的index; 51       obj.options.remove(index); 52     } 53  54     //根据 value或者text值删除一个选项option 55     function removeOneByObj(selectID, textOrValue) { 56       var obj = document.getElementById(selectID); 57       //index,要删除选项的序号,这里取当前选中选项的序号  58       //var index = obj.selectedIndex;//获取选中的选项的index; 59       for (var i = 0; i < obj.options.length; i++) { 60         if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) { 61           obj.options.remove(i); 62           break; 63         } 64       } 65     }  66  67     //获得一个Option Value; 68     function getOptionValue(selectID){ 69       var obj = document.getElementById(selectID);  70       var index=obj.selectedIndex; //序号,取当前选中选项的序号  71       var val = obj.options[index].value; 72       return val; 73     }  74  75     //获得一个option Text; 76     function getOptionText(selectID) { 77       var obj = document.getElementById(selectID);  78       var index=obj.selectedIndex; //序号,取当前选中选项的序号  79       var val = obj.options[index].text; 80       return val; 81     } 82      83     //修改选中的option 84     function editOptions(selectID,newText,newValue) { 85       var obj = document.getElementById(selectID);  86       var index=obj.selectedIndex; //序号,取当前选中选项的序号  87       obj.options[index] = new Option(newText, newValue); 88       obj.options[index].selected = true; 89     } 90  91     //删除select 92     function removeSelect(){ 93       var select = document.getElementById("select");  94       select.parentNode.removeChild(select);  95     } 96   </script> 97 </head> 98 <body> 99 100 </body>101 </html>