77

私は多くのことを試しましたが、何も機能していないようです。

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);

一度選択すると、アクティブな自動発送オプションが常に表示されます。選択をクリアすることができないようです。

選択ボックスは次のとおりです。

<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つのオプションで選択ボックスをクリアできる人はいますか? （将来的には、より多くのオプションが追加されます。

4

21 に答える 21

181

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');

こちらのドキュメントをお読みください（「選択を動的に更新する」というタイトルのセクションを見つけてください）。

PS Chosenの古いバージョンは、わずかに異なるイベントを使用します。

$('#autoship_option').val('').trigger('liszt:updated');
于 2012-07-06T15:38:30.007 に答える
13

最初のオプションで十分です： http：//jsfiddle.net/sFCg3/

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

clickただし、jsfiddleのように、ボタンreadyやドキュメントなどのイベントでこれを実行していることを確認する必要があります。

また、オプションタグには常にvalue属性があることを確認してください。そうでない場合、一部のブラウザは常に空を返しますval()。

編集：
選択したプラグインの使用法を明確にしたので、電話する必要があります

$("#autoship_option").trigger("liszt:updated");

インターフェースを更新するために値を変更した後。

http://harvesthq.github.com/chosen/

于 2012-07-06T15:35:14.617 に答える
8

最新の選択されたJSで更新された選択ボックスをリロードするには、これを試してください。

$("#form_field").trigger("chosen:updated");

http://harvesthq.github.io/chosen/

選択したドロップダウンを、Ajax を使用して新しくロードされた選択ボックスで更新します。

于 2013-08-12T06:24:17.757 に答える
5

これを試して：

$("#autoship_option option[selected]").removeAttr("selected");
于 2012-07-06T15:37:54.367 に答える
4

私はこれを使用します：

$('idSelect').val([]);

IE、Safari、Firefox でテスト済み

于 2014-05-12T15:20:41.617 に答える
2 
$('#autoship_option').val('').trigger('liszt:updated');

デフォルトのオプション値をに設定します''。

https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.jsで入手できる、選択した更新されたjQueryで使用する必要があります。

私は一日を過ごして、最後にとjquery.minは違うものを見つけましたchosen.jquery.min

于 2013-03-21T13:32:15.393 に答える
2

これは find よりも効果的です。

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
于 2014-12-18T21:34:01.170 に答える
1 
jQuery("#autoship_option option:first").attr('selected', true);
于 2012-07-06T15:36:32.860 に答える
0

選択に新しい値を割り当てる必要があると思うので、選択をクリアしたい場合は、値=""の値に割り当てる必要があります。空の文字列に値を割り当てることで取得できると思いますので、.val（''）

于 2012-07-06T15:35:22.880 に答える
0

まさに私は同じ要件を持っていました。ただし、jquery で単に空の文字列を設定してドロップダウン リストをリセットしても機能しません。また、更新をトリガーする必要があります。

Html:
<select class='chosen-control'>
<option>1<option>
<option>2<option>
<option>3<option>
</select>

Jquery:
$('.chosen-control').val('').trigger('liszt:updated');

使用している選択したコントロールのバージョンによっては、以下の構文を使用する必要がある場合があります。

$('.chosen-control').val('').trigger("chosen:updated");

参考：Jqueryで選択した選択オプションをリセットする方法

于 2015-05-23T18:38:38.393 に答える
0 
jQuery('.chosen-processed').find('.search-choice-close').click();
于 2016-01-18T07:45:20.453 に答える
0

新しい Chosen ライブラリはリストを使用しません。私は以下を使用しました：

document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
于 2015-03-17T01:37:04.137 に答える
0

これを試して（空の）ドロップダウンをリセットできます

 $("#autoship_option").click(function(){
            $('#autoship_option').empty(); //remove all child nodes
            var newOption = $('<option value=""></option>');
            $('#autoship_option').append(newOption);
            $('#autoship_option').trigger("chosen:updated");
        });
于 2014-11-13T10:17:33.310 に答える