用復位按鈕重置下拉菜單中的 Select2 值

問題描述

將所選項目重置為默認值的最佳方法是什麼？我正在使用 Select2 庫，當使用普通按鈕 type="reset"時，下拉列表中的值不會重置。

所以當我按下我的按鈕時，我想再次顯示”All” 。

jQuery 的

$("#d").select2();

HTML

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

最佳解決方案

我會嘗試這樣的：

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2('val', 'All');
    });
});

次佳解決方案

您也可以使用重置 select2 值

$(function() {
  $('#d').select2('data', null)
})

或者，當調用 select2 時，您可以傳遞'allowClear': true，並且將有一個 X 按鈕重置其值。

第三種解決方案

根據最新版本 (select2 3.4.5) 記錄的 here，它將簡單如下：

 $("#my_select").select2("val", "");

第四種方案

你可以使用：

$("#d").val(null).trigger("change");

這很簡單，工作正常！如果使用復位按鈕：

$('#btnReset').click(function() {
    $("#d").val(null).trigger("change");
});

第五種方案

版本 4.0

$('#d').val('').trigger('change');

這是從現在開始的正確的解決方案，根據棄用在調試模式下的消息：「select2("val")方法已被棄用，將在以後的 Select2 版本中刪除，使用 $element.val()」

第六種方案

最好的做法是：

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear

第七種方案

如果您有一個填充的選擇小工具，例如：

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

您將想要説服 select2 在重置時恢復原始選擇的值，類似於本機表單的工作原理。要實現這一點，首先重新設置本機窗體然後更新 select2：

$('button[type="reset"]').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest('form').get(0).reset();
    // And then update select2 to match
    $('#d').select2('val', $('#d').find(':selected').val());
}

第八種方案

我看到三個問題：

當它的值由於表單復位而改變時，Select2 控件的顯示不會刷新。
“All” 選項沒有 value 屬性。
“All” 選項被禁用。

首先，我建議您使用 setTimeout 函數確保代碼在表單重置完成後執行。

您可以在點擊按鈕時執行代碼：

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

或者當表單重置時：

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

至於要使用的代碼：

由於”All” 選項被禁用，表單重置不會使其成為所選值。因此，您必須顯式地將其設置為所選值。這樣做的方法是使用 Select2 “val” 功能。而且由於”All” 選項不具有 value 屬性，因此其值與其文本相同，即”All” 。因此，您應該在選擇的答案中使用由 thtsigma 提供的代碼：

$("#d").select2('val', 'All');

如果將屬性 value=""添加到”All” 選項，那麼可以使用 Daniel Dener 給出的代碼：

$("#d").select2('val', '');

如果”All” 選項沒有被禁用，那麼你只需要強制 Select2 刷新，在這種情況下你可以使用：

$('#d').change();

注意：Lenart 的以下代碼是清除選擇的一種方法，但不會導致選擇”All” 選項：

$('#d').select2('data', null)

參考文獻

Resetting Select2 value in dropdown with reset button

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

用復位按鈕重置下拉菜單中的 Select2 值