jquery實現的獲取選中select下拉選單的值和文字

antzone發表於2017-03-21
jQuery

select下拉選單是最為常用的表單元素，經常用在有選擇性的操作，比如選擇年月日，或者興趣愛好等等功能場景中，下面就介紹一下如何利用jquery實現獲取當前選中項的value和text效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("#btn").click(function(){ 
    var index = $("#sel").get(0).selectedIndex; 
    var selectVal = $("#sel option:selected").val(); 
    var selectText = $("#sel option:selected").text();
        $("#show").html("獲取select下拉框索引：" + 
        index + "<br/>" + 
        "獲取select下拉框的值：" + 
        selectVal + "<br/>" + 
        "獲取select下拉框的文字：" + selectText); 
  }); 
}); 
</script>
</head>
<body>
<div id="show"></div>
<div>
  <select id="sel">
    <option selected value=0>螞蟻部落一</option>
    <option value=1>螞蟻部落二</option>
    <option value=2>螞蟻部落三</option>
    <option value=3>螞蟻部落四</option>
    <option value=4>螞蟻部落五</option>
  </select>
</div>
<input id="btn" value="獲取選中的文字和值" type="button"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

2.$("#btn").click(function(){})，為按鈕註冊click事件處理函式。

3.var index = $("#sel").get(0).selectedIndex，獲取選中項的索引值。

4.var selectVal = $("#sel option:selected").val(),獲取選中項的value值。

5.var selectText = $("#sel option:selected").text(),獲取選中項的text文字內容。

二.相關閱讀:

1.get()函式可以參閱jQuery get()一章節。

2.selectedIndex可以參閱javascript select.selectedIndex一章節。

相關文章