網頁

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錯誤,
    像這種問題要怎麼處理,
    感謝分享

    回覆刪除