javaScript的select元素和option的相关操作

时间：2021-09-18 03:24:35
 <!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>
     <title></title>
     <!--添加jquery-->
     <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             createSelect("select", "addSel");
             addOption("addSel", "first", "第一个数据");
             addOption("addSel", "secord", "第二个数据");
             addOption("addSel", "three", "第三个数据");
             addOption("addSel", "four", "第四个数据");
             addOption("addSel", "fives", "第五个数据");
             removeOneByIndex();
             removeOneByObj("addSel", "secord");

             //添加一个option更改事件 调用自己写的方法
             $("#addSel").change(function () {
                 alert("旧文本："+getOptionText("addSel")  +  "旧Value：" + getOptionValue("addSel"));
                 editOptions("addSel", "新文本","新Value");  //注意：不传value值的时候  value值默认为text的值
                 alert("新文本：" + getOptionText("addSel") + "新Value：" + getOptionValue("addSel"));
             })
         })

         //动态创建带id的元素
         function createSelect(element, id) {
             var select = document.createElement(element);
             select.id = id;
             document.body.appendChild(select);
         }

         //根据select的id 添加选项option
         function addOption(selectID,value,text) {
             //根据id查找对象，
             var obj = document.getElementById(selectID);
             obj.options.add(new Option(text, value)); //这个兼容IE与firefox
         }

         //删除所有选项option
         function removeAll(selectID) {
             var obj = document.getElementById(selectID);
             obj.options.length = ;
         }

         //根据 index 值删除一个选项option
         function removeOneByIndex(selectID,index) {
             var obj = document.getElementById(selectID);
             //index,要删除选项的序号，这里取当前选中选项的序号
             //var index = obj.selectedIndex;//获取选中的选项的index;
             obj.options.remove(index);
         }

         //根据 value或者text值删除一个选项option
         function removeOneByObj(selectID, textOrValue) {
             var obj = document.getElementById(selectID);
             //index,要删除选项的序号，这里取当前选中选项的序号
             //var index = obj.selectedIndex;//获取选中的选项的index;
             ; i < obj.options.length; i++) {
                 if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {
                     obj.options.remove(i);
                     break;
                 }
             }
         } 

         //获得一个Option Value；
         function getOptionValue(selectID){
             var obj = document.getElementById(selectID);
             var index=obj.selectedIndex; //序号，取当前选中选项的序号
             var val = obj.options[index].value;
             return val;
         } 

         //获得一个option Text;
         function getOptionText(selectID) {
             var obj = document.getElementById(selectID);
             var index=obj.selectedIndex; //序号，取当前选中选项的序号
             var val = obj.options[index].text;
             return val;
         }

         //修改选中的option
         function editOptions(selectID,newText,newValue) {
             var obj = document.getElementById(selectID);
             var index=obj.selectedIndex; //序号，取当前选中选项的序号
             obj.options[index] = new Option(newText, newValue);
             obj.options[index].selected = true;
         }

         //删除select
         function removeSelect(){
             var select = document.getElementById("select");
             select.parentNode.removeChild(select);
         }
     </script>
 </head>
 <body>

 </body>
 </html>

相关文章