Wie setze ich die erste Option in einem Auswahlfeld mit jQuery?

Ich habe zwei HTML- selectBoxen. Ich muss eine selectBox zurücksetzen , wenn ich eine Auswahl in einer anderen treffe.

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

Wenn ich eine Option der ersten select(dh id="name") auswähle , muss ich die zweite selectauf zurücksetzen select all; Wenn ich eine Option der zweiten select(dh id="name2") auswähle , muss ich die erste selectauf zurücksetzen select all.

Wie kann ich das machen?

So etwas sollte den Trick machen: https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});

Wenn Sie das Auswahlelement nur auf seine erste Position zurücksetzen möchten, ist der einfachste Weg möglicherweise:

$('#name2').val('');

So setzen Sie alle ausgewählten Elemente im Dokument zurück:

$('select').val('')

BEARBEITEN: Zur Verdeutlichung gemäß einem Kommentar unten wird das Auswahlelement auf seinen ersten leeren Eintrag zurückgesetzt und nur dann, wenn ein leerer Eintrag in der Liste vorhanden ist.

Wie von @PierredeLESPINAY in den Kommentaren hervorgehoben, war meine ursprüngliche Lösung falsch - sie würde das Dropdown-Menü auf die oberste Option zurücksetzen, jedoch nur, weil der undefinedRückgabewert in Index 0 aufgelöst wurde.

Hier ist eine korrekte Lösung, die die selectedEigenschaft berücksichtigt:

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

DEMO : http://jsfiddle.net/weg82/257/

Ursprüngliche Antwort - Falsch

In jQuery 1.6+ müssen Sie die .propMethode verwenden, um die Standardauswahl zu erhalten:

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

Verwenden Sie das folgende .changeEreignis, damit es dynamisch zurückgesetzt wird, wenn sich das erste Dropdown ändert :

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});

Verwenden Sie diese Option, wenn Sie die Auswahl auf die Option mit dem Attribut "Ausgewählt" zurücksetzen möchten. Funktioniert ähnlich wie die in form.reset () integrierte Javascript-Funktion für die Auswahl.

 $("#name").val($("#name option[selected]").val());

Das hilft mir sehr.

$(yourSelector).find('select option:eq(0)').prop('selected', true);

Hier ist, wie ich es zum Laufen gebracht habe, wenn Sie es nur zu Ihrer ersten Option zurückbringen möchten, z. B. "Wählen Sie eine Option". "Select_id_wrap" ist offensichtlich das Div um die Auswahl, aber ich möchte dies nur klarstellen, falls dies der Fall ist Einfluss darauf, wie dies funktioniert. Meins wird auf eine Klickfunktion zurückgesetzt, aber ich bin sicher, dass es auch innerhalb einer Änderung funktioniert ...

$("#select_id_wrap").find("select option").prop("selected", false);

Verwenden Sie den folgenden Code. Sehen Sie, wie es hier funktioniert http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });

Dies kann auch verwendet werden

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});

Dies ist die flexibelste / wiederverwendbare Methode, um alle Auswahlfelder in Ihrem Formular zurückzusetzen.

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });

So behandeln Sie es mit einem zufälligen Optionselement, das als Standardwert definiert ist (in diesem Fall ist Text 2 der Standardwert):

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>

Sie können dies versuchen:

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );

Ich hatte ein Problem mit der Eigenschaft defaultSelected in der Antwort von @Jens Roland in jQuery v1.9.1. Eine allgemeinere Methode (mit vielen abhängigen Auswahlen) besteht darin, ein Datenstandardattribut in Ihre abhängigen Auswahlen einzufügen und diese beim Zurücksetzen zu durchlaufen.

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

Und das Javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

Unter http://jsfiddle.net/8hvqN/ finden Sie eine funktionierende Version der oben genannten Version.

Ich habe eine neue Option im Auswahl-Tag erstellt, die den Wert einer leeren Zeichenfolge ("") hat, und Folgendes verwendet:

$("form.query").find('select#topic').val("");

Verwenden Sie jquery, um ein Änderungsereignis für die Auswahl zu binden, aber Sie müssen kein weiteres $(this)jquery-Objekt erstellen .

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});

Verwenden Sie diesen Code, um alle Auswahlfelder auf die Standardoption zurückzusetzen, in der das ausgewählte Attribut definiert ist.

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

Hier ist die beste Lösung, die ich benutze. Dies gilt für über 1 Slectbox

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})

Die Einstellung von Option 1 im Auswahlelement kann von diesem Segment vorgenommen werden. Um es visuell darzustellen, müssen Sie am Ende .trigger ('change') hinzufügen.

$('#name').removeAttr('selected').find('option:first').attr('selected', 'selected').trigger("change");