2014年5月9日 星期五

jQuery設定/變更select物件預設值的方法

寫網頁服務最討厭的一件事就是:各種瀏覽器的DOM生成方式不同,導致認為可以的反應卻沒預期發生...

就說 HTML 裡面的 select 這個物件吧

<select id="SelectID">
  <option value="A" selected="selected">單位A</option>
  <option value="B">單位B</option>
  <option value="C">單位C</option>
</select>

當我想要設定 select 預設值時,可以用下面幾種方式:

$('#SelectID')[0].selectedIndex = 1; //選取第二個欄位 單位B (索引從0開始)
$('#SelectID').get(0).selectedIndex = 1; //效果同上
$('#SelectID').val(selectedValue); //selectedValue是變數,裡面是select option其中一個的value值
$('#SelectID').val('B') //選擇第二欄位,效果同上
$('#SelectID option').filter('[value="'+selectedValue+'"]').attr("selected",true); //filter選項後設定屬性
想要取得其選擇值時可以用:

var dataValue = $('#SelectID').val();  //取得被選項目的value
var dataValue = $('#SelectID').find('option:selected').val(); //效果同上,問題比較少
var dataText = $('#SelectID').find('option:selected').html(); //取得被選項目的文字描述部分

常常遇到某些版本瀏覽器沒有反應,所以就選擇其中有效的試試看吧

0 個回應: