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='/images/loading.gif' data-original="../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>
原标题:javaScript的select元素和option的相关操作
关键词:JavaScript