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

更新時間：2017年05月08日 11:14:33 作者：Cockroach_Ge

本篇文章主要介紹了jQuery實現(xiàn)select下拉框獲取當前選中文本、值、索引以及添加/刪除Select的Option項的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧

話不多說，請看代碼：

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

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

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

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

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

 });
 </script>
</head>
<table>
 <tr>
   <td>
    <!--multiple設定下拉框可以多選，size設定下拉框不呈現(xiàn)下拉方式，-->
    <select size="12" id="One" multiple="multiple">
     <option value='1'>蘋果</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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

jQuery超酷平面式時鐘效果代碼分享
這篇文章主要介紹了jQuery制作的超酷平面式時鐘效果，把日期和時間通過橫向刻度條展現(xiàn)，推薦給大家，有需要的小伙伴可以參考下
2015-08-08
jQuery配合coin-slider插件制作幻燈片效果的流程解析
coin-slider是GitHub上的一個人氣JavaScript開源插件,用它來實現(xiàn)幻燈片效果只需要動手寫很少的代碼,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.
2016-05-05
基于jquery的無限級聯(lián)下拉框js插件
首先聲明這2個無刷新級聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴格的測試，正確使用不會出現(xiàn)bug
2011-10-10
jQuery中andSelf()方法用法實例
這篇文章主要介紹了jQuery中andSelf()方法用法,實例分析了andSelf()方法將先前所選的元素加入當前元素集合中的使用技巧,需要的朋友可以參考下
2015-01-01
寫出高效jquery代碼的19條指南
討論jQuery和javascript性能的文章并不罕見。然而，本文我計劃總結(jié)一些速度方面的技巧和我本人的一些建議，來提升你的jQuery和javascript代碼。好的代碼會帶來速度的提升?？焖黉秩竞晚憫馕吨玫挠脩趔w驗
2014-03-03
jQuery setTimeout()函數(shù)使用方法
setTimeout在以前的js中是定時執(zhí)行一個對象或函數(shù)，下面我來介紹jquery中的setTimeout函數(shù)使用方法有需要了解的朋友仔細的參考參考
2013-04-04
jQuery修改li下的樣式以及l(fā)i下的img的src的值的方法
這篇文章主要為大家介紹了jQuery如何修改li下的樣式，以及修改li下的img的src的值，示例代碼很簡單，一看就會
2014-11-11
JQuery的Validation插件中Remote驗證的中文問題
前段時間，再次出現(xiàn)AJAX中文編碼問題，導致會員名重復檢測失敗，不過這次出現(xiàn)問題的是Validation插件的remote驗證。
2010-07-07
JQuery設置文本框和密碼框得到焦點時的樣式
設置文本框和密碼框得到焦點時的樣式，通過jquery來實現(xiàn)，需要注意的是中間用逗號隔開，感興趣的朋友可以參考下
2013-08-08
jQuery實現(xiàn)導航樣式布局操作示例【可自定義樣式布局】
這篇文章主要介紹了jQuery實現(xiàn)導航樣式布局操作,可實現(xiàn)基于jQuery的用戶自定義樣式布局與屬性動態(tài)操作相關技巧,需要的朋友可以參考下
2018-07-07