jquery的select元素和option的相关操作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的相关操作的主要内容，如果未能解决你的问题，请参考以下文章
jquery删除'select option'元素值，第二个选项值除外