Wie setze ich eine von jquery ausgewählte Auswahloption mit jQuery zurück?

Ich habe zahlreiche Dinge ausprobiert und nichts scheint zu funktionieren.

Ich benutze jQuery und Chosen Plugin.

Methoden, die ich ausprobiert habe:

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

Es wird immer die Option Active Autoship angezeigt, sobald sie ausgewählt wurde. Ich kann es nicht schaffen, die Auswahl zu klären.

Hier ist das Auswahlfeld:

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

Kennt jemand Chosen und kann ein Auswahlfeld mit einer Option löschen? (Es wird in Zukunft mehr Optionen geben.

Das Setzen des selectElementwerts auf eine leere Zeichenfolge ist der richtige Weg, dies zu tun. Dadurch wird jedoch nur das Stammelement aktualisiert select. Das benutzerdefinierte chosenElement hat keine Ahnung, dass das Stammverzeichnis selectaktualisiert wurde.

Um zu benachrichtigen, chosendass das selectgeändert wurde, müssen Sie Folgendes auslösen chosen:updated:

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

Wenn Sie nicht sicher sind, ob die erste Option eine leere Zeichenfolge ist, verwenden Sie Folgendes:

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

Lesen Sie hier die Dokumentation (siehe Abschnitt Dynamisch aktualisieren ).

PS Ältere Versionen von Chosen verwenden ein etwas anderes Ereignis:

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

Die erste Option sollte ausreichen: http://jsfiddle.net/sFCg3/

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

Sie müssen jedoch sicherstellen, dass Sie dies für ein Ereignis wie clickeine Schaltfläche readyoder ein Dokument wie für die jsfiddle ausführen.

Stellen Sie außerdem sicher, dass die Options-Tags immer ein Wertattribut enthalten. Wenn nicht, kehren einige Browser immer leer zurück val().

Bearbeiten:
Nachdem Sie die Verwendung des ausgewählten Plugins geklärt haben, müssen Sie anrufen

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

nachdem Sie den Wert geändert haben, um die Schnittstelle zu aktualisieren.

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

Versuchen Sie dies, um das aktualisierte Auswahlfeld mit dem zuletzt ausgewählten JS neu zu laden.

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

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

Das ausgewählte Dropdown-Menü wird mit dem neu geladenen Auswahlfeld mit Ajax aktualisiert.

Wenn Sie chosenein jquery-Plugin verwenden, verwenden Sie zum Aktualisieren oder Löschen des Dropdown-Inhalts Folgendes:

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

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

chosen:updatedEreignis wird re-buildselbst basierend auf dem aktualisierten Inhalt.

Versuche dies:

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

Ich benutze das:

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

getestet auf IE, Safari & Firefox

Dies ist effektiver als zu finden.

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");

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

Verwenden Sie die obige Konfiguration und beantragen Sie die class='chosen-select-deselect'manuelle Abwahl und setzen Sie den Wert leer

Wenn Sie die Option zum Abwählen in allen Kombinationen verwenden möchten, wenden Sie die Konfiguration wie unten beschrieben an

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

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

und setzen Sie den Standardoptionswert auf ''.

Es muss mit der ausgewählten aktualisierten jQuery verwendet werden, die unter folgendem Link verfügbar ist: https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js .

Ich habe einen ganzen Tag damit verbracht, am Ende herauszufinden, dass jquery.mines anders ist alschosen.jquery.min

jQuery("#autoship_option option:first").attr('selected', true);

Ich bin nicht sicher, ob dies für die ältere Version von gewählt gilt, aber jetzt in der aktuellen Version (v1.4.1) haben sie eine Option. $('#autoship_option').chosen({ allow_single_deselect:true });Dadurch wird neben dem ausgewählten Namen ein ' x' -Symbol hinzugefügt. Verwenden Sie das' x ', um es zu löschen das 'select' feild.

PS: Stellen Sie sicher, dass Sie 'selected-sprite.png' an der richtigen Stelle gemäß der ausgewählten.css haben, damit die Symbole sichtbar sind.

In Chrome Version 49

Sie benötigen immer diesen Code

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

Ich denke, Sie müssen der Auswahl einen neuen Wert zuweisen. Wenn Sie also Ihre Auswahl löschen möchten, möchten Sie sie wahrscheinlich dem Wert mit dem Wert = "" zuweisen. Ich denke, dass Sie es bekommen können, indem Sie den Wert einer leeren Zeichenfolge zuweisen, also .val ('')

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

Geige: http://jsfiddle.net/Z8nE8/

Sie können dies versuchen, um das Dropdown-Menü (leer) zurückzusetzen

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

Die neuen ausgewählten Bibliotheken verwenden das liszt nicht. Ich habe folgendes verwendet:

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

Wenn Sie die erste Option unabhängig von ihrem Wert auswählen müssen (manchmal ist der Wert der ersten Option nicht leer), verwenden Sie Folgendes:

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

Es erhält den Wert der ersten Option und setzt ihn als ausgewählt. Anschließend wird die Aktualisierung bei Ausgewählt ausgelöst. Es funktioniert also wie das Zurücksetzen auf die erste Option in der Liste.

Genau ich hatte die gleiche Anforderung. Das Zurücksetzen der Dropdown-Liste durch Festlegen einer einfach leeren Zeichenfolge mit jquery funktioniert jedoch nicht. Sie sollten auch ein Update auslösen.

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

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

Abhängig von der Version des ausgewählten Steuerelements, das Sie verwenden, müssen Sie möglicherweise die folgende Syntax verwenden.

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

Referenz: Zurücksetzen der ausgewählten Auswahloption von Jquery

jQuery('.chosen-processed').find('.search-choice-close').click();

Einfache Triggeränderung wie folgt hinzufügen:

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

Von den oben genannten Lösungen hat nichts für mich funktioniert. Das hat funktioniert:

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

Warum das? :) :)

$.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");
        }
      });
     }