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 xmlns="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>

 

你可能感兴趣的:(javaScript的select元素和option的相关操作)