自動目錄

• 設定值
• 取值
• 未選取的 select 判斷
• 取回最大索引值(index)
• 在前後加入選項
• 清空所有選項

html中的元件select，在jquery中要如何使用？

<select id="sfs" name="sfsname">
  <option value="1">第一項</option>
  <option value="2">第二項</option>
  <option value="3">第三項</option>
</select>

設定值

  $("#sfs")[0].selectedIndex = 0;   //設定第一個欄位選取，[0]一定要加

  $("#sfs")[0].selectedIndex = 1; //設定第二個選項選取則指定為1，以此類推。

  $("#sfs").val(3);  //設定值為3的選項被選取

取值

  var s= $("#sfs").val();

以name的屬性取得select物件
  var s=$("select[name='sfsname']").val();

取得選取值的文字 取得選取值的文字而非其值
  var txt=$("#sfs :selected").text();

取得第1個選項
  $("#sfs option:first").css("color","red");

取回選中的選項，取得選中的選項給定顏色紅色字
  $("#sfs option:selected").css("color","red");

未選取的 select 判斷

利用null來決定一個select是否為未選取
  if( $("#sfs").val() == null){ alert("null"); }

取回最大索引值(index)

select 中的 最大索引值就是選項數目+1，也可以-1來判斷所有的項目個數。

var maxIndex=$("#sfs option:last").attr("index");

如果是用觸發回傳的select，例如階層式選取區域ajax方法取回的select，選取指定select id也沒有用，這時只能由$(this)來下手：
maxIndex=$(this).children("option:last").attr('index');

在前後加入選項

  $("#sfs").prepend(new Option('加一個選項在最前面，值為0，選取', 0, true));
  $("#sfs").append(new Option('加一個選項在最後面，值為1，不選取', 1, false));

清空所有選項

  $("#sfs").empty();

使用AJAX的JSON 方法取回資料庫的資料

若想在change 事件時，會用 AJAX的JSON格式取回資料，做法如下：

HTML

<select id="sfs" name="sfsname"> 
  <option value="1">第一項</option>
  <option value="2">第二項</option>
  <option value="3">第三項</option>
</select>
<!-- 先隱藏子層select元件 -->
<select id="sfs2" name="sfsname2" style="display:none;"> 
</select>

jQuery

$("#sfs").change(function(){;
  // 這裡的 provider.php 是自己撰寫的php碼，作用是自資料庫取得資料後回傳(印)一個 json格式的資料，p參數代入選單目前的值
  // 例如格式：
   $.getJSON('provider.php?p='+ $("#sfs").val(), 
  // data是json格式的資料，把這個資料寫入表單中
   function(data){
     $("#sfs2").css("display","inline"); //顯現
     ..加入選項..
   });
});

待完..

原文張貼於 2009-10-18 04:59:48 2014-11-23改寫 新精讚再次改寫