Comment réinitialiser une boîte de sélection à l'aide de jquery ?

Question

J'ai deux boîtes de sélection en html, j'ai besoin de réinitialiser une boîte de sélection lorsque je sélectionne l'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 identifiant, c'est-à-dire le nom, je dois réinitialiser les deuxièmes options à toutes et vice versa. Comment puis-je le faire ?

Answer 1

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

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

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

Answer 2

Si vous souhaitez simplement réinitialiser l'élément sélectionné à sa première position, la méthode la plus simple est la suivante :

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

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

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

Answer 3

Dans la version jQuery 1.6+, vous devez utiliser la balise .prop pour obtenir la sélection par défaut :

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

Pour qu'il soit réinitialisé dynamiquement lorsque la première liste déroulante change, utilisez l'option .change événement :

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

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

Answer 4

Cela m'aide beaucoup.

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

Answer 5

Utilisez le code ci-dessous. Voir le fonctionnement 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');
     });
 });