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 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("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 //删除select 102 function removeSelect(selectID){ 103 var obj = $("#" + selectID + ""); 104  obj.remove(); 105  } 106 </script> 107 </head> 108 <body> 109 110 </body> 111 </html>

 

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