jQuery 之 Select 設定值的方法

jquery-logo

jQuery  select 之操作

設定值

若一個 select  id=PvdrList,希望在頁面載入時即自動選取其中一個項目,可用以下兩者方法:

$(“#PvdrList")[0].selectedIndex = 0;   //設定第一個欄位選取,[0]一定要加
$(“#PvdrList").val(3);  //設定值為3的選項被選取

取值

var s= $(“#PvdrList").val();

以select的name取得select物件,若一select物件的name=stype
var s=$(“select[name=’stype’]").val();

未選取的 select 判斷

利用null來決定一個select是完全未選取的
if( $(‘#c1’).val() == null)alert(“null");

取得選取值的文字 取得選取值的文字而非其值

$(“#c1 :selected").text()

取回最大索引值(index) select 中的 最大索引值就是選項數目+1:

maxIndex=$(“#select_id option:last").attr(“index");

ps..如果是用觸發回傳的select,指定select id也沒有用,這時只能由$(this)來下手:

maxIndex=$(this).children(“option:last").attr(‘index’);

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

若此 select  在 change 事件時,會用 AJAX的JSON 方法取回資料庫的資料,我們在select建立一個change事件:

1
2
3
4
5
6
7
8
9
10
$("#PvdrList").change(function(){;
  // 這裡的 provider.php 是自己撰寫的php碼,作用是自資料庫取得資料後
  // 回傳(印)一個 json格式的資料,p參數代入選單目前的值
   $.getJSON('provider.php?p='+ $("#PvdrList").val(), 
  // data是json格式的資料,把這個資料寫入表單中
   function(data){
        $("select[name=active]").val( data.active );  //select name="active" 賦值
        $("input[name=pID]").val( data.pID );  //input或textarea類型給值的寫法
    });
});

如果希望在頁面第一次載入時,要指定目前選單的選項,如最前面所述方法:

例 $(“#PvdrList")[0].selectedIndex = 0;

沒有問題,但這樣指定並不會觸發 change 事件,所以我們要叫用trigger方法強制觸發

$(“#PvdrList")[0].selectedIndex = 1;  //第二個選項選取
$(“#PvdrList").trigger(‘change’);

如此便會自動執行 onchange事件了。

此文章出處:  精讚部落
     http://note.tc.edu.tw/158.html

Be the first to comment on "jQuery 之 Select 設定值的方法"

Leave a comment

Your email address will not be published.


*