web-dev-qa-db-ja.com

jQueryでjquery-chosen選択オプションをリセットするにはどうすればよいですか？

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

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

jqueryjquery-chosen
66
James Wilson

select要素の値を空の文字列に設定するis正しい方法です。ただし、それはルート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');

ここにあるドキュメント （「動的に選択された更新」というタイトルのセクションを参照）を読んでください。

P.S。古いバージョンのChosenでは、若干異なるイベントが使用されます。

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

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

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

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

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

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

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

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

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

12
Ricardo Souza

これを試して、最新の選択済みJSで更新された選択ボックスを再ロードしてください。

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

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

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

8
Rakesh

これを試して：

$("#autoship_option option[selected]").removeAttr("selected");
4
Antonio Beamud

私はこれを使用します：

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

iE、Safari、Firefoxでテスト済み

3
jrg

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

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
2
Philip
var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

上記の設定を使用し、class='chosen-select-deselect'を適用して、手動で選択を解除し、値を空に設定します

または、すべてのコンボでオプションの選択を解除する場合は、次のような構成を適用します

var config = {
  '.chosen-select'           : {allow_single_deselect:true},//Remove if you do not need X button in combo
  '.chosen-select-deselect'  : {allow_single_deselect:true},
  '.chosen-select-no-single' : {disable_search_threshold:10},
  '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
  '.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
  $(selector).chosen(config[selector]);
}
2
NIrav Modi
$('#autoship_option').val('').trigger('liszt:updated');

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

このリンクで利用可能な選択された更新済みjQueryで使用する必要があります： https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js 。

最後にjquery.minがchosen.jquery.minと異なることを見つけるために丸1日過ごしました

2
Kareem

Chromeバージョン49

常にこのコードが必要です

$("select option:first").prop('selected', true)

1
Diogo Cid

これが選択した古いバージョンに適用されるかどうかはわかりませんが、現在のバージョン（v1.4.1）ではオプション$('#autoship_option').chosen({ allow_single_deselect:true });があります。これにより、選択した名前の横に「x」アイコンが追加されます。 「選択」フィールドをクリアするには「x」。

PS：アイコンが表示されるように、chosen.cssに従って正しい場所に「chosen-Sprite.png」があることを確認してください。

1
Harsh Gupta
jQuery("#autoship_option option:first").attr('selected', true);
1
mafafu
jQuery('.chosen-processed').find('.search-choice-close').click();
0
Abdulla Abu Zakham

値に関係なく最初のオプションを選択する必要がある場合（最初のオプション値が空でない場合があります）、これを使用します。

$('#autoship_option').val($('#autoship_option option:first-child').val()).trigger("liszt:updated");

最初のオプションの値を取得し、選択されたとおりに設定してから、選択時に更新をトリガーします。したがって、リストの最初のオプションにリセットするように機能します。

0
Artur Stępień

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

 $("#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");
        });
0
Naresh Ramoliya

上記のソリューションから、何も私のために働いた。これはうまくいきました：

$('#client_filter').html(' '); //this worked

何故ですか？ :)

$.ajax({ 
        type: 'POST', 
        url: xyz_ajax,
        dataType: "json",
        data : { csrfmiddlewaretoken: csrftoken,
                instancess : selected_instances }, 
        success: function(response) { 
            //clear the client DD       
            $('#client_filter').val('').trigger('change') ; //not working
            $('#client_filter').val('').trigger('chosen:updated') ; //not working
            $('#client_filter').val('').trigger('liszt:updated') ; //not working
             $('#client_filter').html(' '); //this worked
             jQuery.each(response, function(index, item) {
                  $('#client_filter').append('<option value="'+item.id+'">' + item.text + '</option>');
                });                 
           $('#client_filter').trigger("chosen:updated");
        }
      });
     }
0
Deepa MG

Jqueryプラグインchosenを使用している場合、ドロップダウンのコンテンツを更新またはクリアするには、次を使用します。

$('#dropdown_id').empty().append($('< option>'))

dropdown_id.chosen().trigger("chosen:updated")

chosen:updatedイベントは、更新されたコンテンツに基づいてre-build自体になります。

0
priyanka yadav

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

document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
0
ter24

まったく同じ要件がありました。ただし、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の選択オプションをリセットする方法

0
chindirala sampath kumar

HTML：

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

JS：

$('#rs').on('click', function(){
    $('autoship_option').find('option:selected').removeAttr('selected');
});

フィドル： http://jsfiddle.net/Z8nE8/

0
bancer

選択に新しい値を割り当てる必要があると思うので、選択をクリアしたい場合は、おそらく値= ""を持つものに割り当てたいと思うでしょう。私はあなたが値を空の文字列に割り当てることでそれを取得できると思うので、.val（ ''）

0
Nir

次のような単純な追加トリガーの変更：

$('#selectId').val('').trigger('change');
0
buidan