Comment puis-je sélectionner toutes les options de la boîte de sélection à sélection multiple en cliquant ?

Question

C'est mon HTML

 <select name="countries" id="countries" MULTIPLE size="8">
   <option value="UK">UK</option>
   <option value="US">US</option>
   <option value="Canada">Canada</option>
   <option value="France">France</option>
   <option value="India">India</option>
   <option value="China">China</option>
</select>
<br />
<input type="button" id="select_all" name="select_all" value="Select All">

Lorsque l'utilisateur clique sur le bouton "Sélectionner tout", je souhaite que toutes les options de la zone de sélection soient sélectionnées

 $('#select_all').click( function() {
    // ?
});

Answer 1

Essaye ça:

 $('#select_all').click(function() {
    $('#countries option').prop('selected', true);
});

Et voici une démo en direct .

Answer 2

Pour les versions jQuery 1.6+ puis

 $('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

Ou pour les anciennes versions :

 $('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

DÉMO EN DIRECT

Answer 3

Donnez l' selected à toutes les options comme celle-ci

 $('#countries option').attr('selected', 'selected');

Usage:

 $('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

---

Mettre à jour

Si vous utilisez 1.6+, une meilleure option serait d'utiliser .prop() au lieu de .attr()

 $('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

Answer 4

essaye ça,

appelez une méthode selectAll() onclick et écrivez une fonction de code comme suit

 function selectAll(){
    $("#id").find("option").each(function(this) {
    $(this).attr('selected', 'selected');
    });
}

Answer 5

Si vous utilisez JQuery 1.9+, les réponses ci-dessus ne fonctionneront pas dans Firefox.

Voici donc un code pour le dernier jquery qui fonctionnera dans tous les navigateurs.

Voir la démo en direct

Voici le code

 var select_ids = [];
$(document).ready(function(e) {
    $('select#myselect option').each(function(index, element) {
        select_ids.push($(this).val());
    })
});

function selectAll()
{
    $('select#myselect').val(select_ids);
}

function deSelectAll()
{
    $('select#myselect').val('');
}

J'espère que cela vous aidera... :)