web-dev-qa-db-fra.com

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

J'ai deux boîtes HTML select. Je dois réinitialiser une boîte select 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 du premier select (c'est-à-dire id="name"), je dois réinitialiser le second 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?

javascriptjquery
131
Anish

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

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


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

Si vous souhaitez simplement réinitialiser l’élément sélectionné à 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, conformément à un commentaire ci-dessous, ceci réinitialise l'élément sélectionné à sa première entrée vide et uniquement s'il existe une entrée vide dans la liste.

44
AndreasT

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

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

_$('#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 méthode .prop 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 de manière dynamique lorsque la première liste déroulante est modifiée, utilisez l'événement .change :

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

Utilisez ceci si vous souhaitez réinitialiser la sélection à l'option qui a l'attribut "sélectionné". Fonctionne de la même manière que la fonction JavaScript intégrée à la sélection.reset ().

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

Cela m'aide beaucoup.

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

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 la division qui entoure la sélection, mais je tiens simplement à préciser cette solution, au cas où elle influerait sur son fonctionnement. Mine réinitialise à une fonction de clic, mais je suis sûr que cela fonctionnera également dans un changement sur ...

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

Utilisez le code ci-dessous. Voyez-le travailler 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');
     });
 });
3
Muhammad Usman

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

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

Cela peut aussi ê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('');
});
3
Azam Alvi

Voici comment le gérer avec un élément d'option aléatoire défini comme valeur par défaut (dans ce cas, le 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>
1
mightytightywty

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

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

J'ai eu un problème d'utilisation de la propriété defaultSelected dans la réponse de @Jens Roland dans jQuery v1.9.1. Une façon plus générique (avec de nombreuses sélections dépendantes) serait de mettre un attribut data-default dans vos sélections dépendantes et de le parcourir ensuite 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 de travail de ce qui précède.

0
spyle

Voici la meilleure solution im using. Ceci s'appliquera à plus de 1 boîte

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

Utilisez jquery pour lier l'événement onchange à la sélection, mais vous n'avez pas besoin de créer un autre objet $(this) 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;
    }
});
0
John Magnolia

Vous pouvez essayer ceci:

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

Utilisez ce code pour réinitialiser tous les champs de sélection sur l'option par défaut, dans laquelle 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>
0
Sjoerd Linders