comment sélectionner et désélectionner toutes les options dans une boîte de sélection

<select name="remaintextarea" id="studentremain" size="10">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>

Eu une boîte de sélection ci-dessus, tout sélectionner et désélectionner tous les boutons ci-dessus. Ma question est par l'utilisation de jquery, comment puis-je obtenir le bouton pour sélectionner toutes les options et décochez toutes les options dans la boîte de sélection ci-dessus lorsque l'utilisateur clique sur les boutons?

Ci-dessous je viens d'avoir le déclic des gestionnaires pour les deux boutons:

$('#selectall').click(function() {

});   

$('#deselectall').click(function() {

});
Vous ne pouvez pas sélectionner toutes les options dans cet élément, sauf si vous ajoutez le multiple attribut.

OriginalL'auteur user1881090 | 2013-01-10

  1. 24

    Vous devez ajouter le multiple attribut à l'élément select, puis vous pouvez:

    $('#selectall').click(function() {
    $('select#studentremain option').attr("selected","selected");
});   

$('#deselectall').click(function() {
    $('select#studentremain option').removeAttr("selected");
});
    Je ne suis pas sûr, parce que JSFiddle ne fonctionne pas pour moi en Chrome récemment (v 23.0.1271.97), j'ai juste beaucoup d'erreurs de la console (c'est à dire Uncaught TypeError: Object #<Object> n'a pas de méthode 'getCode'). travail parfaitement avec JSFiddle sur Firefox.
    Son ok compris, grâce à une précédente question, quelqu'un a posté sur le même problème dans la, pour désélectionner le faire et il va unhighlight de toutes les options de chrome (fonctionne dans les autres navigateurs) $('select#studentremain').find("option").removeAttr("selected").end().focus().blur();
    Brillant content que ça fonctionne 🙂
    sélection et désélection n'arrive qu'une fois, après cela, il n'y a pas de changement à tous, pourquoi est-il si ?
    Vérifiez que vous n'avez pas une erreur dans votre code JavaScript. C'est généralement la cause des événements qui ne fonctionne plus. Vérifier par l'ajout de quelques alertes dans votre code pour s'assurer qu'il est en train d'être atteint.

    OriginalL'auteur Tony Day

  2. 8

    Essayer cette démo

    Devez ajouter multiple="multiple", de sélectionner l'élément

    HTML: 

    <select multiple="multiple" name="remaintextarea" id="studentremain" size="10">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>

    JS:

    $('#selectall').click(function() {
    $('#studentremain > option').attr("selected", "selected");
});   

$('#deselectall').click(function() {
    $('#studentremain > option').removeAttr("selected");
});

    OriginalL'auteur phnkha

  3. 3

    Ajouter le plusieurs attribut à votre boîte de sélectionner d'abord de sorte que vous pouvez avoir plusieurs valeurs sélectionnées, puis quelque chose comme cela serait suffisant puisque vous êtes à l'aide de jQuery.

    //for selection of all.
$('#studentremain option').attr('selected','selected');

//for removal of selection.
$('#studentremain option').removeAttr('selected');

    Vous pouvez essayer prop et removeProp à la place de l'attr.

    OriginalL'auteur Jonathan Schroeder

  4. 0

    En quelque sorte les réponses ci-dessus ne fonctionne pas pour moi. Semble que vous avez à utiliser les propriétés plutôt que des attributs.
    Voici le code:

    $('#selectall').click(function() {
    $('select#studentremain option').prop("selected",true);
});   

$('#deselectall').click(function() {
    $('select#studentremain option').prop("selected",false);
});

    Documentation dit que selected attribut spécifie seulement que option doivent être pré-sélectionné lors du chargement de la page. Mais n'est pas définie lorsque la option est sélectionné par l'utilisateur.
    Source

    OriginalL'auteur gtu