Bouts de code : Select Input

   

Note :
Vous pouvez aussi changer de langue en tapant "E" pour lire le texte en anglais ou "F" pour le lire en français...
You can also change the language by typing "E" to read the text in English or "F" to read it in French ...

6 jQuery snippets you can use to manipulate select inputs

6 bouts de codes utiles pour manipuler les select inputs

When it comes to manipulating the DOM, fewer elements are more tiresome than the good old select input. Fortunately for us, jQuery makes what was once a headache, a walk in the park.

Quand il s'agit de manipuler le DOM, moins d'éléments est plus ennuyeux que le bon vieux select input. Heureusement pour nous, jQuery change ce qui était autrefois un mal de tête en une partie de plaisir.

Listed below are 6 snippets which should make manipulating those selects more pleasant than say, pulling your own teeth.

Voici 6 bouts de code qui devraient rendre la manipulation des éléments select plus agréable que de s'arracher les cheveux.

1. Getting the value of a selected option.

1. Récupérer la valeur d'une option sélectionnée.

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

This couldn't be simpler. Remember how before jQuery, you had to use selectedIndex and all those lovely javascript methods. I do, and I don’t miss it one bit.

Cela ne pouvait pas être plus simple. Rappelez-vous comment, avant jQuery, vous deviez utiliser selectedIndex et toutes ces méthodes javascript lovely. Je le fais, et je ne le ratez pas une miette.

2. Getting the text of a selected option.

2. Faire passer le texte d'une option sélectionnée.

$('#selectList :selected').text();

Similar in concept to the first snippet with one difference. Where the first example gives you the "value" of the selected option, this example gives you the actual text contained inside the option tag.

Le concept est similaire au bout de code précédent avec une petite différence. Alors que le premier exemple vous donnait la "valeur" de l'option choisie, cet exemple vous donne le texte actuel figurant dans la balise option.

3. Getting the text/value of multiple selected options.

3. Obtenir le texte / valeur de plusieurs options sélectionnées.

var foo = [];
$('#multiple :selected').each(function(i, selected){
    foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
// pour obtenir les valeurs sélectionnées, utilisez simplement .val() - ce qui renvoie une chaîne ou un tableau
foo = $('#multiple :selected').val();

Once again, the same concept as the first two examples, except we’re now using jQuery’s "each()" method to loop through all selected options in a multiple select list. Each value or text value is read into an array for later use.

Encore une fois, le même concept que les deux premiers exemples, sauf que nous utilisons maintenant la méthode each() de jQuery pour boucler à travers toutes les options sélectionnées dans une liste de sélection multiple. Chaque valeur (value) ou valeur du texte (text) est inscrite dans un tableau pour une utilisation ultérieure.

4. Using selected options in conditional statements

4. Utiliser des éléments option sélectionnés dans des instructions conditionnelles

switch ($('#selectList :selected').text()) {
    case 'First Option':
    // do something
    break;
    case 'Something Else':
    // do something else
    break;
}

switch ($('#selectList :selected').text()) {
    case 'Première option': 
    // faire quelque chose
    break;
    case "Quelque chose d'autre": 
    // faire autre chose
    break;
}

Much like example 2, we're getting the text() value of a selected option, only this time we’re going to use it inside a switch statement.

Tout comme dans l'exemple 2, nous obtenons la valeur text() de l'option choisie, mais cette fois nous allons l'utiliser dans une instruction switch.

5. Removing an option.

5. Supprimer un élément option.

$("#selectList option[value='2']").remove();

Using an attribute filter, we can find and therefore manipulate specific options within a select list. In this example we’re telling jQuery to find the option with value="2" and then remove it from the select list. We can similarly add options to a select list as we’ll see in example 6.

En utilisant un filtre attribut, nous pouvons trouver et donc de manipuler les options spécifiques au sein d'une liste de sélection. Dans cet exemple, nous disons à jQuery pour trouver l'option dont la valeur est "2" puis de le supprimer de la liste de sélection. Nous pouvons de même ajouter des options dans une liste sélectionnée comme nous le verrons dans l'exemple 6.

6. Moving options from list A to list B.

6. Déplacer des options d'une liste A vers une liste B.

$().ready(function() {
    $('#add').click(function() {
        return !$('#select1 option:selected').appendTo('#select2');
    });
    $('#remove').click(function() {
        return !$('#select2 option:selected').appendTo('#select1');
    });
});

Originally posted by Jeremy Martin, here we have 2 select lists and 2 buttons. If you click the "add" button, we remove the selected option from select1 and add that same option to select2. The "remove" button just does things the opposite way around. Thanks to jQuery’s chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.

Issu du post original de Jeremy Martin, nous avons ici 2 listes de sélection et 2 boutons. Si on clique sur le bouton "ajouter", on enlève l'option choisie à partir de select1 et on l'ajoute dans select2. Le bouton "Supprimer" fait tout simplement l'inverse. Merci aux capacités de chaînage jQuery, ce qui était autrefois une entreprise assez délicate avec JS peut maintenant être fait en seulement 6 lignes de code.

And there you go. That wasn’t so bad now was it ? If you have any other handy snippets, or you’ve found an easier way to do something already covered here, why not leave a comment and share the love!

Pas mal, non ? Si vous avez d'autres extraits de bonnes pratiques, ou que vous avez trouvé un moyen plus facile de faire quelque chose de déjà abordés ici, pourquoi ne pas laisser un commentaire et partager votre expérience !

Update:

Mise à jour:

Incidentally, a few hours after first publishing this post I came across the following "jQuery – Select element cheat sheet". Technically speaking, it may be a little big to be called a cheat sheet, but the author has given a very thorough and practical guide which I’m definitely going to be making use of.

Soit dit en passant, quelques heures après avoir publié d'abord ce post, je suis tombé sur ce qui suit "jQuery – Select element cheat sheet". Techniquement parlant, c'est peut être un peu gros pour être appelé un cheat sheet, mais l'auteur a donné un guide très complet et pratique que je vais vraiment utiliser.

 

jQuery – Select element cheat sheet

 

A final note Currently there are several great tutorials that cover many ways that you can access and manipulate select elements using jQuery, but there doesn’t seem to be one place that has it all. I wanted to write this document to save people like myself who have links to about 10 different tutorials from having to go searching each time you want to remember how to do something. This document was produced after several hours of research and hard work; I hope it is a benefit to many. A big thanks to everyone for your feedback, please let me know either via email or leaving a comment on the blog if you have something kind or constructive to say. If there is anything incorrect or missing from this document please also let me know so that everyone can benefit. As you may be interested in cutting and pasting from this document to try out on your own systems please not that the content of this document and the code contained within is provided as is and is without warranty of any kind including merchantability or fitness for any other purpose whatsoever.

Une note finale, actuellement il ya plusieurs didacticiels qui couvrent de nombreuses façons que vous pouvez accéder et de manipuler des éléments de sélectionner à l'aide jQuery, mais il ne semble pas être un lieu qui a tout. Je voulais écrire ce document pour sauver les gens comme moi qui ont des liens avec environ 10 tutoriaux différente de faire de recherche à chaque fois que vous voulez vous rappeler la façon de faire quelque chose. Ce document a été produit après plusieurs heures de recherche et de travail, j'espère que c'est un avantage pour beaucoup. Un grand merci à tous pour vos commentaires, s'il vous plaît laissez-moi savoir par email ou en laissant un commentaire sur le blog si vous avez quelque chose de bon ou de constructif à dire. S'il ya quelque chose incorrecte ou manquante à partir de ce document, s'il vous plaît également me le faire savoir afin que tous puissent en bénéficier. Comme vous mai être intéressés par découpe et collage à partir de ce document pour essayer sur vos propres systèmes s'il vous plaît pas que le contenu de ce document et le code contenu dedans est fournie telle quelle et sans garantie aucune, notamment de qualité marchande ou d'adéquation à un autre fin que ce soit.

A big thanks also to the jQuery team for making such a great product. Please go to the jQuery site for the full documentation and latest plug-ins.

Un grand merci également à l'équipe de jQuery pour faire une telle excellent produit. S'il vous plaît aller sur le site jQuery pour la documentation complète et les derniers plug-ins.

The myphpetc… blog can be found here http://myphpetc.blogspot.com. I keep this updated regularly so come back and visit often. - Tim Radnidge.

Myphpetc ... Le blog peut être trouvée ici http://myphpetc.blogspot.com. Je garde cette mise à jour régulièrement venu si arrière et revenez régulièrement. - Tim Radnidge.