2011年9月12日 星期一

jQuery 對下拉選單 DropDownList 的操作 - 1

下拉選單在網頁表單上是個使用相當頻繁的物件,以前在還沒有使用 jQuery 時,對於下拉選單的操作就不是那麼的直覺與方便,現在有了 jQuery 之後,操作下拉選單就同如虎添翼一般,但是在專案執行的過程中,還是時常看到令人哭笑不得的操作方式,看久了就想整理一篇文章,記錄一下使用 jQuery 操作下拉選單的各種方法與心得,總之就是要消除不良寫法以及去除沒有效率的操作!



1.選取目前下拉選單的選取值

這是最常使用的操作,其實很簡單,如下所示:

image

第一個使用的是

$('#CountyDDL').val();

第二個使用的是

$('#CountyDDL option:selected').val();

這兩種方式,很多人會選擇使用第一種,因為要打的字比較少,但是我所使用的是第二種方法,除了明確指定之外,其實還有另一種原因,在取得選取項目的值,第一種方式一樣可以取得option的value,但是如果是要取得option的text呢?

image

$('#CountyDDL').text();

上面的寫法竟然是把下拉選單裡所有 option 的 text 都給取出來,這就與我們所要的就不一樣的,而如果是使用指定option : selected 呢?

image

這就乖乖的把 selected 的 option text 給取出來囉!所以不要貪圖省略打字的方便,而造成取值的非預期結果產生。

 

2.指定位置索引index的option為選取狀態(簡言之,將下拉選單的第幾個option給設為selected)

這個也是使用度相當高的語法,也是有兩種方式,如下所示:

image

其實兩種寫法都可以正常運作,

第一種寫法就是先將下拉選單轉為 DOM 物件再用 javascript 的操作方法把指定 index 的 option 給設為 selected.

第二種寫法就是完全用 jQuery 的方式,將 index 為 10 的 option, 將 selected 的 attribute 給設為 true.

我推薦使用第二種方法,原因是,完全使用 jQuery 的 selector 操作,不需要再轉為 DOM 物件,減少轉換的動作。

另外也可以使用以下的方式,直接指定 index 值來取得 option:

$('#CountyDDL option:[index=1]').attr('selected', true);

而相對的,如果說想要知道目前下拉選單中以選取像項目的 index 值,則是可用以下的方式:

$('#CountyDDL option:selected').index();

 

3. 動態增加下拉選單的option

image

這樣的操作方式就會在下拉選單的最後一個 option 的後面再去添加新的 option.

image

那如果我們需要添加新的 option 到指定的 index 位置呢?

我們可以使用第 2 點的操作,先取得指定 index 位置的 option 之後,再使用 jQuery 的 after 方法,讓新的 option 添加到已經取得的 option 後面,就可以完成。

image

下圖為執行操作後的結果。

image

 

 

4. 讓下拉選單的option其Value相等於某值時就設定為selected

這個操作也是相當常用,當取得某值時,要讓下拉選單的 option 其 value 相等於某值時,讓這個 option 為 selected。最常見的操作方式就是用 each() 以迴圈的方式去判斷 option 的 value 是否等於某值,如果是就設 selected 為 true.

如下:

image

程式部分:

var someValue = '234';
$('#CountyDDL option').each(function(i, item)
{
    if($(item).val() == someValue)
    {
        $(item).attr('selected', true);
    }
});

必須說… 這樣操作的效能很差,在上面的圖示中可以看到 Firebug 也出現一堆的 option,這是因為我們是遍歷了下拉選單所有的 option,逐一比對 option 的 value 是否相等於某值,如果今天下拉選單的 option 數目有數百上千筆(這情況應該不會出現),那遍歷所有option就會耗費很多的時間了,這樣的方式可以達成功能結果,但是執行的方式與過程太笨了。

再來看看下面的方法:

image

程式部分:

var someValue = '234';
$('#CountyDDL option[value='+ someValue +']').attr('selected', true);

直接把 Value 相等於某值的 option 取出後再去設定其 selected 的 atrribute 為 true,這樣的方式就比用 each 迴圈逐一比對來得簡單也更為清楚,重要的是效能也好很多。

 

5. 移除指定的option、清除下拉選單的option內容.

如果說要把下拉選單所有的 option 內容清除,只要執行下面的程式即可:

$('#CountyDDL option').remove();
//or
$('#CountyDDL').empty();

如果說要移除指定 index 位置的 option 的話,則是如以下的程式:

$('#CountyDDL option:eq(0)').remove();

如果是要移除 option 其 value 為某值,則是以下的程式:

$('#CountyDDL option:[value=233]').remove();
$('#CountyDDL option[value=233]').remove();

 

甚至說要移除掉下拉選單目前的選取項目,如以下的程式:

$('#CountyDDL option:selected').remove();

基本上移除這個操作比較沒有什麼技巧性,因為只要你可以利用 jQuery Selector 選取到物件,就可以使用 remove 方法做移除。

 

2013-03-18 更新

網友 longer Chen 訊息回覆說到,嗯嗯嗯,似乎是這樣子,不過本著追根究柢的精神,所以就做了一下實驗,

image

以下是用我原本的操作方式「有加上冒號」的操作,

image

執行結果,是可以正確移除指定選項的,不過這是在 Firefox 的情況,看看其他兩種瀏覽器

image

IE 10 瀏覽器

image

執行結果,也是正確的移除指定項目,

image

Chrome 瀏覽器

image

執行結果,也是正確的移除指定項目,

image

所以在 selector 裡 option 後面加上「:」並不會影響選取的操作與正確性,不過為了與其他 selector 的操作一致,還是不要標新立異的去加上冒號,就去掉冒號吧!

$('#CountyDDL option[value=233]').remove();

 

當然,關於下拉選單的操作其實還有很多種變化,但是上面的五種都是經常會使用到的,這邊記錄下來,另外也大家做個心得分享,如果有更為簡潔的方式,也希望可以做個交流。

 

以上!

12 則留言:

  1. 4. 讓下拉選單的option其Value相等於某值時就設定為selected
    不是用
    $('#CountyDDL').val('someValue');
    就可以了嗎?

    回覆刪除
    回覆
    1. 你說的沒錯,
      但因為 $('#id').val('someValue'); 這樣的寫法是設置被選元素的值,
      在下拉選單也是可以用這樣的設定,
      用我所說的方法雖然是比較繞口也需要多打一些字,
      因為下拉選單的操作不外乎都是在 option 上去做操作,
      所以在情境的使用上,我用的方式是比較合理的。

      刪除
  2. 如果是要移除 option 其 value 為某值,則是以下的程式:

    $('#CountyDDL option:[value=233]').remove();==>好像要去掉option後面的「:」號
    $('#CountyDDL option[value=233]').remove();

    回覆刪除
    回覆
    1. Hello, 其實兩種操作方式都可以正常執行 remove 指定 option 項目的動作,
      不過你說得沒錯,將冒號(:)拿掉比較好。

      刪除
  3. 作者已經移除這則留言。

    回覆刪除
  4. 您好

    您的文章好清楚,圖文並茂,很好懂
    能否跟您請教給粗淺的問題:
    $ ( ' < o p t i o n > < / o p t i o n > ' ).這樣的selector是甚麼意思呢?


    想清除符合某個文字的選項,有類似$('#CountyDDL option[value=233]').remove();這種符合某個 value的方法嗎?我試過用 text ,失敗^^

    回覆刪除
    回覆
    1. $ ( ' < o p t i o n > < / o p t i o n > ' ) 建立一個 element

      要清除每個文字的選項,用 text=ooxx 這樣當然不行,因為你要的是"符合" 並非"等於"
      所以 jQuery selector 怎麼找項目的文字 "符合" 你的條件,就用以下的作法
      http://api.jquery.com/contains-selector/

      刪除
  5. 您好:
    真的非常抱歉,想請問要如何連結至指定的檔案呢?是否有完整的語法,不好意思,是否可以麻煩拜託請您教教我呢?千萬拜託,感激不盡,謝謝您喔!

    回覆刪除
    回覆
    1. 啊?為什麼同樣的問題要連貼三篇文章,而且跟文章主題不一樣呀

      刪除
  6. 請問要怎麼讓下拉選單不可下拉?

    回覆刪除
  7. 加上屬性 disabled, 這應該是 HTML 的基本喔
    https://www.w3schools.com/tags/tag_select.asp
    https://www.w3schools.com/tags/att_select_disabled.asp

    回覆刪除
  8. 您好:
    $('#CountyDDL option[value='+ someValue +']').attr('selected', true);
    關於這語法,如果value的值中有一些特殊字元或是空格,這樣會造成jquery錯誤,
    像這種問題要怎麼處理,
    感謝分享

    回覆刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。