javaScript 의 select 요소 와 option 의 관련 작업

8232 단어
 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>

좋은 웹페이지 즐겨찾기