[jQuery] 如何取得 select List index 和 value 值

 Posted on March 20, 2009  |  1 minutes  |  139 words  |  appleboy

上次寫了 [jQuery] 表單取值 radio checkbox select text 驗證表單，這篇淺顯易懂，在 ptt 有人問到如何把 select 的 value 跟 text 值加入到另一個 select 的 options 裡面，其實還蠻簡單的，利用 jQuery - Select box manipulation 這個 plugin 就可以輕鬆做到了，底下是我的一些筆記心得：

實作案例

首先如何取得 select 的 value 跟 text

1
2
3
4
5

/*
*
* 取得 select value 值
*/
$('#selectList').val();

取得 text 值，可以利用 :selected 這個

1
2
3
4
5

/*
*
* 取得 select text 值
*/
$('#selectList :selected').text();

底下是一個範例，實做選取 select options 加入到另一個 select，html 部份：

1
2
3
4
5
6
7
8

<select id="test1" name="test1" />
  <option value="1">中正大學</option>
  <option value="2">台灣大學</option>
  <option value="3">交通大學</option>
</select>
<select id="test2" />
  <option value="0">請選擇</option>
</select>

jQuery 部份：

1
2
3
4
5
6
7

$("#test1").change(function(){
  /*
  * $(this).val() : #test1 的 value 值
  * $('#test1 :selected').text() : #test1 的 text 值     
  */
  $("#test2").addOption($(this).val(), $('#test1 :selected').text());
});

參考文章

jQuery 

See also