你的位置:首页 > Java教程

[Java教程]jquery的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  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("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       removeOneByValue("addSel", "three"); 17  18       //****************以验证不可以根据text值取得option元素*********************** 19       //removeOneByText("addSel", "第三个数据"); 20       //****************以验证不可以根据text值取得option元素*********************** 21  22       //removeAll("addSel");   //删除select元素的所有options 23       //removeSelect("addSel"); //删除select元素; 24  25       setDefaultByValue("addSel", "four"); //设置option的默认值 26  27       //添加一个option更改事件 调用自己写的方法 28       $("#addSel").change(function () { 29         alert("旧文本:" + getOptionText("addSel") + "   旧Value:" + getOptionValue("addSel")); 30         editOptions("addSel", "新文本", "新Value"); //注意:不传value值的时候 value值默认为text的值 31         alert("新文本:" + getOptionText("addSel") + "   新Value:" + getOptionValue("addSel")); 32       }) 33     }) 34  35     //动态创建带id的select 36     function createSelect(id) { 37       $("body").append("<select id="+id+"></select>"); 38     } 39  40     //根据select的id 添加选项option 41     function addOption(selectID,value,text) { 42       //根据id查找select对象,  43       var obj = $("#" + selectID + ""); 44       $("<option></option>").val(value).text(text).appendTo(obj); 45     } 46  47     //根据value的值设置options默认选中项 48     function setDefaultByValue(selectID,value) { 49       var obj = $("#" + selectID + ""); 50       obj.val(value); 51     } 52  53     //获得选中的Option Value; 54     function getOptionValue(selectID) { 55       //var obj = $("#" + selectID + " option:selected").val();  56       //上面和下面两种都可以 57       var obj = $("#" + selectID + "").find("option:selected").val(); 58       return obj; 59     } 60  61     //获得选中的option Text; 62     function getOptionText(selectID) { 63       //var obj = $("#" + selectID + " option:selected").text(); 64       //上面和下面两种都可以 65       var obj = $("#" + selectID + "").find("option:selected").text(); 66       return obj; 67     } 68  69     //修改选中的option 70     function editOptions(selectID, newText, newValue) { 71       var obj = $("#" + selectID + "").find("option:selected"); 72       obj.val(newValue).text(newText); 73     } 74  75     //根据 index 值删除一个选项option 76     function removeOneByIndex(selectID, index) { 77       var obj = $("#" + selectID + " option[index=" + index + "]"); 78       obj.remove(); 79     } 80  81     //根据 value值删除一个选项option 82     function removeOneByValue(selectID, text) { 83       var obj = $("#" + selectID + " option[value=" + text + "]"); 84       obj.remove(); 85     } 86  87     //****************以验证不可以根据text值取得option元素*********************** 88     //根据text值删除一个选项option  感觉不可用 真的 89     //function removeOneByText(selectID, text) { 90     //var obj = $("#" + selectID + " option[text=" + text + "]"); 91     //obj.remove(); 92     //} 93     //****************以验证不可以根据text值取得option元素*********************** 94  95     //删除所有选项option 96     function removeAll(selectID) { 97       var obj = $("#" + selectID + ""); 98       obj.empty(); 99     }100 101     //删除select102     function removeSelect(selectID){103       var obj = $("#" + selectID + "");104       obj.remove();105     }106   </script>107 </head>108 <body>109 110 </body>111 </html>