jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引

話不多說(shuō)，請(qǐng)看代碼：

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計(jì),周至網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:周至等地區(qū)。周至做網(wǎng)站價(jià)格咨詢:18980820575

//直接保存后綴.htnl用谷歌瀏覽器打開(kāi)，親測(cè)有效
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $(function(){
  //為Select添加事件，當(dāng)選擇其中一項(xiàng)時(shí)觸發(fā)
  $("select:eq(0)").change(function(){
   //code
  });
  //獲取Select選中的Text:結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本
  var checkText = $("select:eq(0) :selected").text();//建議用這個(gè)簡(jiǎn)單
     = $("select:eq(0) option:selected").tetx();
     = $("#One").find(":selected").text();
     = $("#One").find("option:selected").text();

 //如果多選，將返回一個(gè)數(shù)組，其包含所選的值。
  var checkValue = $("#select_id").val();
 //獲取Select選中匹配元素的當(dāng)前值,即[即使多選也只]取得第一個(gè)匹配元素的val內(nèi)容
  var checkValue = $("select:eq(0) :selected").val();//=========強(qiáng)烈建議用這個(gè)，以防多選

  //獲取Select選中的索引值
  var checkIndex = $("#select_id ").get(0).selectedIndex; 
  //獲取Select最大的索引值 
  var maxIndex = $("#select_id :last").prop("index"); //建議用這個(gè)
     = $("#select_id option:last").prop("index"); 
     = $("select:eq(0)").find(":last").prop("index")
     = $("select:eq(0)").find("option:last").prop("index")

 //=========================================================================================
 //jQuery設(shè)置Select選擇的 Text和Value:
 // 設(shè)置Select的Value值為4的項(xiàng)選中
 $("#select_id ").val(4); //用這個(gè) 
 $("#select_id [value='4']").prop("selected", true);
 $("#select_id option[value='4']").prop("selected", true);
 //設(shè)置select中的第一個(gè)option被選中
 $("select :first").prop("selected", true);//這個(gè)
 $("select :first").prop("selected", 'selected'); 
 $("select option:first").prop("selected", "true"); 
 $("select option:first").prop("selected", "selected"); 

 //============================================================================================
 //jQuery添加/刪除Select的Option項(xiàng)
 $("#select_id").append("<option value='Value'>Text</option>"); //為Select末尾追加一個(gè)Option(下拉項(xiàng))
 $("#select_id").prepend("<option value='0'>請(qǐng)選擇</option>"); //為Select首部插入一個(gè)Option(第一個(gè)位置)
 $("#select_id :last").remove(); //刪除Select中索引值最大Option(最后一個(gè))
 $("#select_id :fist").remove(); //刪除Select中索引值最小為0Option(第一個(gè))
 $("#select_id [value='3']").remove(); //刪除Select中Value='3'的Option

 });
 </script>
</head>
<table>
 <tr>
   <td>
    <!--multiple設(shè)定下拉框可以多選，size設(shè)定下拉框不呈現(xiàn)下拉方式，-->
    <select size="12" id="One" multiple="multiple">
     <option value='1'>蘋(píng)果</option>
     <option value="2">香蕉</option>
     <option value="3">草莓</option>
     <option value="4">橘子</option>
    </select>
   </td>
   <td>
     <input type="button" value=">>>"><br>
     <input type="button" value="&nbsp;>&nbsp;"><br>
     <input type="button" value="&nbsp;<&nbsp;"><br>
     <input type="button" value="<<<"><br>

   </td>
   <td>
     <select size="12" id="two" multiple="multiple">
      <option value="5">葡萄</option>
     </select>

   </td>
   <td>
     <input type="button" value="&nbsp;up&nbsp;"><br><br>
     <input type="button" value="down"><br>
   </td>
 </tr>
</table>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

網(wǎng)站名稱：jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
URL分享：http://muchs.cn/article48/ihddhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名