jQueryで選択されたselectオプションをリセットするには？

質問

いろいろ試したのですが、何も効果がないようです。

jQueryとChosenプラグインを使用しています。

私が試した方法。

var select = jQuery('#autoship_option');

select.val(jQuery('options:first', select).val());

jQuery('#autoship_option').val('');

jQuery('#autoship_option').text('');

jQuery('#autoship_option').empty('');

jQuery("#autoship_option option[value='']").attr('selected', true);

一度選択したActive Autoshipのオプションが常に表示されます。 選択を解除することはできないようです。

セレクトボックスはこちらです。

<select id="autoship_option" data-placeholder="Choose Option..." 
style="width: 175px;" class="chzn-select">
    <option value=""></option>
    <option value="active">Active Autoship</option>
</select>

Chosenに詳しい方、セレクトボックスを1つのオプションでクリアできるようになった方、いらっしゃいますか？(将来的にはもっと選択肢が増える予定です。

どのように解決するのですか？

を設定します。 select 要素の値を空文字列にする は が正しい方法です。しかし、この方法ではルートの select 要素を更新するだけです。カスタム chosen 要素には、ルート select は更新されたことを知りません。

を通知するために chosen という select が変更されたら chosen:updated :

$('#autoship_option').val('').trigger('chosen:updated');

または、最初のオプションが空文字列であることが確かでない場合は、これを使用します。

$('#autoship_option')
    .find('option:first-child').prop('selected', true)
    .end().trigger('chosen:updated');

読む ドキュメントを読む (というタイトルのセクションを探します。 Chosenを動的に更新する ).

P.S. 古いバージョンのChosenは少し異なるイベントを使用します。

$('#autoship_option').val('').trigger('liszt:updated');