jQuery操作select、option参考

View Code 
  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>jQuery-Select-Test</title>
  5     <script src="http://media.pec365.com/rainnoless/javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  6     <style type="text/css">
  7         .div
  8         {
  9             width:95%;
 10             margin-left:15px; 
 11             margin-top:15px; 
 12             margin-right:15px; 
 13             padding-left:5px;
 14             padding-top:5px;
 15             padding-bottom:5px;
 16             background-color:#ccc; 
 17             border:#999 1px solid;
 18             line-height:30px;
 19             font-size:13px;
 20             font-family:微软雅黑;
 21         }
 22         .blue{color:Blue;}
 23         .green{color:Green;}
 24         .button{border:green 1px solid;width:230px;}
 25     </style>
 26 </head>
 27 <body>
 28 <div class="div">
 29 jQuery获取Select选择的Text和Value:<br />
 30 <select id="slc1" >
 31     <option value="0">请选择</option>
 32     <option value="1">C#</option>
 33     <option value="2">Javascript</option>
 34     <option value="3">jQuery</option>
 35     <option value="4">C++</option>
 36     <option value="5">Java</option>
 37     <option value="6">VB</option>
 38 </select>&nbsp;
 39 选择一项试试看<br />
 40 <script type="text/javascript"> 
 41     $("#slc1").change(function(){
 42         var checkText=$("#slc1").find("option:selected").text();
 43         var checkValue=$("#slc1").val();
 44         var checkIndex=$("#slc1 ").get(0).selectedIndex;
 45         var maxIndex=$("#slc1 option:last").attr("index");
 46         alert('您选择的Text是： '+checkText+"\r\n"+"您选择的Value是： "+checkValue+"\r\n您选择的索引值是： "+checkIndex+"\r\n最大索引值是： "+maxIndex);
 47     });
 48 </script>
 49 语法解释：<br />
 50 1. $("#select_id").change(function(){//code...}); &nbsp;&nbsp;<span class="green">//为Select添加事件，当选择其中一项时触发</span><br />
 51 2. var checkText=$("#select_id").find("option:selected").text();&nbsp;&nbsp;<span class="green">//获取Select选择的Text</span><br />
 52 3. var checkValue=$("#select_id").val();&nbsp;&nbsp;<span class="green">//获取Select选择的Value</span><br />
 53 4. var checkIndex=$("#select_id ").get(0).selectedIndex;&nbsp;&nbsp;<span class="green">//获取Select选择的索引值</span><br />
 54 5. var maxIndex=$("#select_id option:last").attr("index");&nbsp;&nbsp;<span class="green">//获取Select最大的索引值</span>
 55 <br />
 56 jQuery设置Select选择的Text和Value:<br />
 57 <input type="button" id="btn_index" class="button" value="设置Select索引值为1的项选中" />
 58 <br />
 59 <input type="button" id="btn_text" class="button" value="设置Select的Text值为jQuery的项选中" />
 60 <br />
 61 <input type="button" id="btn_value" class="button" value="设置Select的Value值为4的项选中" />
 62 <br />
 63 语法解释：<br />
 64 1. $("#select_id ").get(0).selectedIndex=1;&nbsp;&nbsp;<span class="green">//设置Select索引值为1的项选中</span><br />
 65 2. $("#select_id ").val(4); &nbsp;&nbsp;<span class="green">//设置Select的Value值为4的项选中</span><br />
 66 3. $("#select_id option[text='jQuery']").attr("selected", true); &nbsp;&nbsp;<span class="green">//设置Select的Text值为jQuery的项选中</span><br />
 67 <script type="text/javascript"> 
 68     $("#btn_index").click(function(){
 69         $("#slc1 ").get(0).selectedIndex=1;   
 70     });
 71     $("#btn_value").click(function(){
 72         $("#slc1 ").val(4);   
 73     });
 74     $("#btn_text").click(function(){
 75         $("#slc1 option[text='jQuery']").attr("selected", true); 
 76     });
 77 </script>
 78 </div>
 79  
 80 <div class="div">
 81 jQuery添加/删除Select的Option项：<br />
 82 <select id="slc2">
 83 </select><br />
 84 <input type="button" class="button" id="btn_add" value="追加Option项" />&nbsp;点击一次，Select将追加一个Option<br />
 85 <input type="button" class="button" id="btn_insert_first" value="插入Option项" />&nbsp;点击将在Select第一个位置插入一个Option<br />
 86 <input type="button" class="button" id="btn_del" value="删除Option项" />&nbsp;点击将删除Select中索引值最大Option(最后一个)<br />
 87  
 88 <script type="text/javascript"> 
 89     var i=1;
 90     var bI=false;
 91     $("#btn_add").click(function(){
 92         $("#slc2").append("<option value='"+i+"'>"+i+"</option>");
 93         i++;
 94     });
 95     $("#btn_insert_first").click(function(){
 96         if (!bI)
 97         {
 98             $("#slc2").prepend("<option value='0'>请选择</option>");
 99             bI=true;
100         }
101     });
102     $("#btn_del").click(function(){
103         $("#slc2 option:last").remove();
104     });
105 </script>
106 语法解释：<br />
107 1. $("#select_id").append("&lt;option value='Value'>Text&lt;/option>");&nbsp;&nbsp;<span class="green">//为Select追加一个Option(下拉项)</span><br />
108 2. $("#select_id").prepend("&lt;option value='0'>请选择&lt;/option>");&nbsp;&nbsp;<span class="green">//为Select插入一个Option(第一个位置)</span><br />
109 3. $("#select_id option:last").remove();&nbsp;&nbsp;<span class="green">//删除Select中索引值最大Option(最后一个)</span><br />
110 4. $("#select_id option[index='0']").remove();&nbsp;&nbsp;<span class="green">//删除Select中索引值为0的Option(第一个)</span><br />
111 5. $("#select_id option[value='3']").remove();&nbsp;&nbsp;<span class="green">//删除Select中Value='3'的Option</span><br />
112 5. $("#select_id option[text='4']").remove();&nbsp;&nbsp;<span class="green">//删除Select中Text='4'的Option</span><br />
113 </div>
114 <br />
115  
116 </body>
117 </html>
posted @ 2011-03-03 16:31  KaTuu  阅读(965)  评论(0)    收藏  举报