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

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

---

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

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

第一個使用的是

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

第二個使用的是

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

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

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

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

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

 

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

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

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

第一種寫法就是先將下拉選單轉為 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

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

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

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

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

 

 

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

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

如下：

程式部分：

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

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

再來看看下面的方法：

程式部分：

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 訊息回覆說到，嗯嗯嗯，似乎是這樣子，不過本著追根究柢的精神，所以就做了一下實驗，

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

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

IE 10 瀏覽器

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

Chrome 瀏覽器

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

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

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

 

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

 

以上！