Setzen Sie den Wert eines Auswahlfelds zurück

Ich versuche, den Wert von zwei Auswahlfeldern zurückzusetzen, die so strukturiert sind,

<select>
  <option></option>
  <option></option>
  <option></option>
</select>

<select>
  <option></option>
  <option></option>
  <option></option>
</select>

jQuery,

$('select').each(function(idx, sel) {
  $(sel).find('option :eq(0)').attr('selected', true);
});

Leider passiert es einfach nicht, egal wie oft ich es versuche. Nichts in der Konsole. Ich habe keine Ahnung, was los ist? Ich weiß, dass es einen Weg geben muss, das zu tun, du kannst es tun irgendetwas mit JS

BEARBEITEN:

Ich habe herausgefunden, dass das Problem nur auftritt, wenn ich versuche, den Code beim Klicken auf ein Dom-Element auszulösen, aber ich weiß, dass der Code funktionieren sollte, denn wenn ich es getan habe

$('p').click(function(){
  console.log('test');
});

Es gibt ‘test’ an die Konsole aus, aber wenn ich den Code in diese Funktion einfüge, passiert nichts. Warum ist das?

Ich nehme an, Sie möchten nur ein einzelnes Element zurücksetzen. Das Zurücksetzen eines gesamten Formulars ist einfach: Rufen Sie es auf zurücksetzen Methode.

Der einfachste Weg, ein ausgewähltes Element “zurückzusetzen”, besteht darin, es zu setzen selectedIndex -Eigenschaft auf den Standardwert. Wenn Sie wissen, dass keine Option die standardmäßig ausgewählte Option ist, legen Sie einfach die ausgewählten Elemente fest ausgewähltIndex Eigenschaft auf einen angemessenen Wert:

function resetSelectElement(selectElement) {
    selecElement.selectedIndex = 0;  // first option is selected, or
                                     // -1 for no option selected
}

Da jedoch eine Option möglicherweise das ausgewählte Attribut hat oder anderweitig auf die standardmäßig ausgewählte Option eingestellt ist, müssen Sie möglicherweise Folgendes tun:

function resetSelectElement(selectElement) {
    var options = selectElement.options;

    // Look for a default selected option
    for (var i=0, iLen=options.length; i<iLen; i++) {

        if (options[i].defaultSelected) {
            selectElement.selectedIndex = i;
            return;
        }
    }

    // If no option is the default, select first or none as appropriate
    selectElement.selectedIndex = 0; // or -1 for no option selected
}

Und hüten Sie sich davor, Attribute anstelle von Eigenschaften zu setzen, sie haben unterschiedliche Auswirkungen in verschiedenen Browsern.

Das funktioniert bei mir:

$('select').prop('selectedIndex', 0);

GEIGE

Neben der reinen/Vanille-Javascript-Antwort von @RobG können Sie mit auf den Standardwert zurücksetzen

selectElement.selectedIndex = null;

Es scheint, dass -1 alle Elemente abwählt, null das Standardelement auswählt und 0 oder eine positive Zahl die entsprechende Indexoption auswählt.

Optionen in einem ausgewählten Objekt werden in der Reihenfolge indiziert, in der sie definiert sind, beginnend mit einem Index von 0.

Quelle

neRok hat diese Antwort oben angesprochen und ich erweitere sie nur.

Laut dem etwas veralteten, aber praktischen O’Reilly-Nachschlagewerk Javascript: The Definitive Guide :

Das ausgewähltIndex Die Eigenschaft des Select-Objekts ist eine Ganzzahl, die den Index der ausgewählten Option innerhalb des Select-Objekts angibt. Wenn keine Option ausgewählt ist, ausgewähltIndex ist -1.

Daher wird der folgende Javascript-Code das Select-Objekt auf keine ausgewählten Optionen “zurücksetzen”:

select_box = document.getElementById("myselectbox");
select_box.selectedIndex = -1;

Beachten Sie, dass das Ändern der Auswahl auf diese Weise nicht das auslöst bei Änderung() Ereignishandler.

benutze die .val('') Setter

jsfiddle-Beispiel

$('select').val('1');

Ich habe vor einiger Zeit eine kleine Hilfsfunktion gefunden und verwende sie seitdem zum Zurücksetzen meiner Formularelemente (Quelle: http://www.learningjquery.com/2007/08/clearing-form-data):

function clearForm(form) {
  // iterate over all of the inputs for the given form element
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs, 
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared 
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

… oder als jQuery-Plugin…

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value="";
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Was für mich funktionierte, war:

$('select option').each(function(){$(this).removeAttr('selected');});