it-swarm.com.de

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

Ich habe zahlreiche Dinge ausprobiert und nichts scheint zu funktionieren.

Ich verwende jQuery und das gewählte 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 zeigt immer die Option Active Autoship an, sobald diese ausgewählt wurde. Ich kann nicht scheinen, die Auswahl zu löschen.

Hier ist die Auswahlbox:

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

Wer kennt sich mit Auserwähltem aus und kann eine Auswahlbox mit einer Option löschen? (Es wird in Zukunft mehr Optionen haben.

63
James Wilson

Setzen Sie den Wert des Elements select auf eine leere Zeichenfolge ist, um die richtige Vorgehensweise zu erreichen. Dadurch wird jedoch nur das select-Stammelement aktualisiert. Das benutzerdefinierte chosen-Element hat keine Ahnung, dass der Stamm select aktualisiert wurde.

Um chosen zu benachrichtigen, dass die select geändert wurde, müssen Sie chosen:updated auslösen:

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

wenn Sie nicht sicher sind, dass die erste Option eine leere Zeichenfolge ist, verwenden Sie die folgende Option:

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

Lesen Sie die Dokumentation hier (finden Sie den Abschnitt mit dem Titel Aktualisieren von ausgewählten Dateien).


P.S. Ältere Versionen von Chosen verwenden ein etwas anderes Ereignis:

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

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 click einer Schaltfläche oder ready oder für ein Dokument ausführen, z.

Stellen Sie außerdem sicher, dass auf den Option-Tags immer ein Wertattribut vorhanden ist. Wenn nicht, werden einige Browser bei val() immer leer angezeigt.

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, wird die Schnittstelle aktualisiert.

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

12
rcdmk

Versuchen Sie dies, um die aktualisierte Auswahlbox mit Latest Chosen JS neu zu laden.

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

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

Es wird die ausgewählte Dropdown-Liste mit neu geladenem Auswahlfeld mit Ajax aktualisiert.

8
Rakesh

Versuche dies:

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

Ich benutze das:

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

getestet auf IE, Safari & Firefox

3
jrg

Das ist effektiver als finden.

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

Verwenden Sie die obige Konfiguration und verwenden Sie class='chosen-select-deselect', um die Auswahl manuell aufzuheben und den Wert leer zu setzen

oder wenn Sie die Option zum Deaktivieren in allen Kombinationsfeldern wünschen, wenden Sie die Konfiguration wie folgt 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]);
}
2
NIrav Modi
$('#autoship_option').val('').trigger('liszt:updated');

und setzen Sie den Standardoptionswert auf ''.

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

Ich habe einen ganzen Tag verbracht, um am Ende herauszufinden, dass sich jquery.min von chosen.jquery.min unterscheidet.

2
Kareem

In Chrome Version 49

du brauchst immer diesen Code

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

1
Diogo Cid

Ich bin mir nicht sicher, ob dies für die ältere Version von selected gilt, aber jetzt haben sie in der aktuellen Version (v1.4.1) die Option $('#autoship_option').chosen({ allow_single_deselect:true });. Dies fügt ein "x" -Symbol neben dem ausgewählten Namen ein. Verwenden Sie das "x" Löschen Sie das Auswahlfeld.

PS: Vergewissern Sie sich, dass Sie "selected-Sprite.png" an der richtigen Stelle gemäß dem ausgewählten.css ausgewählt haben, damit die Symbole sichtbar sind.

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

Wenn Sie die erste Option unabhängig von ihrem Wert auswählen müssen (manchmal ist der erste Optionswert 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 es als ausgewählt. Anschließend wird das ausgewählte Gerät aktualisiert. Es funktioniert also wie das Zurücksetzen auf die erste Option auf der Liste.

0
Artur Stępień

Sie können versuchen, die Dropdown-Liste 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");
        });
0
Naresh Ramoliya

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");
        }
      });
     } 
0
Deepa MG

Wenn Sie chosen verwenden, ein Jquery-Plugin, verwenden Sie zum Aktualisieren oder Löschen des Inhalts der Dropdown-Liste Folgendes:

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

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

chosen:updated event re-build selbst basiert auf dem aktualisierten Inhalt.

0
priyanka yadav

Die neuen auserwählten Bibliotheken verwenden das Liszt nicht. Ich habe folgendes verwendet:

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

Ich hatte genau die gleiche Anforderung. Das Zurücksetzen der Dropdown-Liste durch Festlegen einer 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 verwendeten Version des ausgewählten Steuerelements müssen Sie möglicherweise die folgende Syntax verwenden.

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

Referenz: So setzen Sie die gewählte Auswahloption von Jquery zurück

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/

0
bancer

ich denke, Sie müssen dem select einen neuen Wert zuweisen. Wenn Sie Ihre Auswahl löschen möchten, möchten Sie ihn wahrscheinlich dem Wert zuweisen, der value = "" hat. Ich denke, dass Sie es bekommen können, indem Sie den Wert so einem leeren String zuweisen. .Val ('')

0
Nir

Einfacher Triggerwechsel wie folgt hinzufügen: 

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