Comment définir la première option sur une boîte de sélection à l'aide de jQuery?

J'ai deux selectboîtes HTML . J'ai besoin de réinitialiser une selectboîte lorsque je fais une sélection dans une autre.

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

Lorsque je sélectionne une option de la première select(c'est-à-dire id="name"), je dois réinitialiser la seconde selectà select all; de même, lorsque je sélectionne une option de la seconde select(c'est-à-dire id="name2"), je dois réinitialiser la première selectà select all.

Comment puis je faire ça?

Quelque chose comme ça devrait faire l'affaire: https://jsfiddle.net/TmJCE/898/

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


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

Si vous souhaitez simplement réinitialiser l'élément select à sa première position, le moyen le plus simple peut être:

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

Pour réinitialiser tous les éléments sélectionnés dans le document:

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

EDIT: Pour clarifier selon un commentaire ci-dessous, cela réinitialise l'élément de sélection à sa première entrée vide et uniquement si une entrée vide existe dans la liste.

Comme l'a souligné @PierredeLESPINAY dans les commentaires, ma solution d'origine était incorrecte - elle réinitialiserait la liste déroulante sur l'option la plus haute, mais uniquement parce que la undefinedvaleur de retour était résolue à l'index 0.

Voici une solution correcte, qui prend selecteden compte la propriété:

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

DÉMO : http://jsfiddle.net/weg82/257/

Réponse originale - INCORRECT

Dans jQuery 1.6+, vous devez utiliser la .propméthode pour obtenir la sélection par défaut:

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

Pour le réinitialiser dynamiquement lorsque la première liste déroulante change, utilisez l' .changeévénement:

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

Utilisez cette option si vous souhaitez réinitialiser la sélection sur l'option qui a l'attribut "sélectionné". Fonctionne de manière similaire à la fonction javascript intégrée form.reset () pour sélectionner.

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

Cela m'aide beaucoup.

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

Voici comment je l'ai fait fonctionner si vous voulez juste le ramener à votre première option, par exemple "Choisissez une option" "Select_id_wrap" est évidemment le div autour de la sélection, mais je veux juste que cela soit clair au cas où il aurait toute incidence sur la façon dont cela fonctionne. Le mien se réinitialise à une fonction de clic, mais je suis sûr que cela fonctionnera également à l'intérieur d'un changement ...

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

Utilisez le code ci-dessous. Voyez-le fonctionner ici http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

Cela peut également être utilisé

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


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

C'est le moyen le plus flexible / réutilisable de réinitialiser toutes les cases de sélection de votre formulaire.

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

Voici comment le gérer avec un élément d'option aléatoire défini comme valeur par défaut (dans ce cas, Texte 2 est la valeur par défaut):

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

Vous pouvez essayer ceci:

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

J'ai eu un problème en utilisant la propriété defaultSelected dans la réponse de @Jens Roland dans jQuery v1.9.1. Une manière plus générique (avec de nombreuses sélections dépendantes) serait de mettre un attribut de données par défaut dans vos sélections dépendantes, puis de les parcourir lors de la réinitialisation.

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

Et le javascript ...

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

Voir http://jsfiddle.net/8hvqN/ pour une version fonctionnelle de ce qui précède.

J'ai créé une nouvelle option dans la balise de sélection qui a une valeur de chaîne vide ("") et utilisé:

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

Utilisez jquery pour lier l'événement onchange à sélectionner, mais vous n'avez pas besoin de créer un autre $(this)objet jquery.

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

Utilisez ce code pour réinitialiser tous les champs de sélection à l'option par défaut, où l'attribut sélectionné est défini.

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

Voici la meilleure solution que j'utilise. Cela s'appliquera pour plus d'une slectbox

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

La configuration de l'option 1 dans l'élément de sélection peut être effectuée par ce segment. Pour le montrer visuellement, vous avez tp add .trigger ('change') à la fin.

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