點擊select下拉框獲取option的屬性值
阿新 • • 發佈：2017-08-06
添加 對象 logs 調用 wid cti 渲染 pre con
select下拉框作為前端開發者應該是經常使用的，最近在項目中遇到這樣的情況，點擊下拉框選項，需要獲取所點擊的option的屬性值，當時想很簡單啊，給option加一個點擊事件不就行了，然後就加了一下，結果一運行悲催了，怎麽點擊option事件就是不會執行。這是為什麽呢，剛開始也不懂，之前沒遇到過這樣的需求，後來經過學習，才恍然大悟，原來select option沒有點擊事件，要想獲得所選option的屬性值，需要通過jquery的change()方法來獲取，下面通過代碼解釋一下，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 告訴IE使用最新的引擎渲染網頁 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div>
<select id="choice">
<option value="1">東方1</option>
<option value="2">東方2</option>
<option value="3">東方3</option>
<option value="4">東方4</option>
</select>
</div>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$(
如上面代碼所示，給select添加change()方法，用來監聽下拉框的變化，當點擊下拉框option進行選擇時，select發生變化，觸發change()事件，$dom[0].selectedIndex表示點擊option的索引值，select option的索引值默認從0開始，$dom[0].options[$dom[0].selectedIndex]表示所點擊option對象，取到對象之後就可以取相應的屬性值了。在這裏用到$dom[0]，是因為selectedIndex和options是dom的屬性，只有dom對象才能去調用，所以在這裏進行了jquery對象的轉換。至於jquery對象和dom對象的相互轉換，我在博客中有分享，歡迎查看。
點擊select下拉框獲取option的屬性值