[精讚] [會員登入]
30225

[jQuery] select 元件的取值及給值

html中的元件select,在jquery中要如何使用?

此文完整連結 http://n.sfs.tw/10047

複製連結 [jQuery] select 元件的取值及給值@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-04-01 01:09:14 最後編修
2016-10-18 20:43:08 By 張○○
 

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改寫 新精讚再次改寫

你可能感興趣的文章

[Javascript/Jquery] 移除textarea中空行、空白行。 textarea中要移除沒內容的空行、只有空白的行、只有定位字元的行

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

[Ckeditor4] 讀、寫與插入內容到欄位 Ckeditor4 提供非常多方法,可以插入、讀取和寫入到TEXTAREA中

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

Javascript/Jquery 建立、讀取、刪除cookie值 Javascript/Jquery 建立、讀取、刪除cookie值

Jquery 圖片放大的工具:放大鏡 想讓網頁上的圖片局部放大,有沒有簡單好用的 jquery?

[Jquery] 複選的checkbox取值 遇到複選的checkbox該如何取值?

[CKeditor4] 修改調色盤 修改ckeditor預設的調色盤

[Javascript] NaN是什麼? javascript 的NaN和取得整數

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[HP DL380G7] 生效啟動第3,4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3,4片網卡裝完系統後找不到,難道是壞了?要怎麼辦?

[AS3] 我做的唯一一個Flash As3遊戲UFO INVADSION [AS3] 我做的唯一一個Flash As3遊戲,是第一個也是最後一個,後來就沒再寫as3,不過as3還滿好玩的。

[CodeIgniter 3] 資料庫的使用方法整理1/2 --Select的使用 [CodeIgniter 3] 資料庫的使用方法整理:Select的使用

[PHP]解決ksort新增的SORT_NATURAL|SORT_FLAG_CASE方法 php>=5.4中ksort函數多了SORT_NATURAL 和 SORT_FLAG_CASE 旗標,對舊版的PHP中要怎麼辦?

對物品的感情 這個議題很奇怪,可是大部分的人都會有,物品是死的,壞了就淘汰,出新的就被替換。為何會有情感?