La génération d'une chaîne délimitée par des virgules, de sélectionner l'élément en jQuery

Voici ce qu'il se passe. J'ai un élément select, pour lequel j'ai besoin d'obtenir une chaîne délimitée par des virgules de toutes ses options, indépendamment de si oui ou non il est sélectionné.

Comment puis-je, en jQuery/javascript prendre ceci:

    <select id="currentTags" multiple>
        <option>Nature</option>
        <option>Cats</option>
        <option>Space</option>
    </select>

et de le transformer en ceci:

    "Nature, Cats, Space"

J'ai essayé de trouver des façons de le faire et je ne pouvais pas... je suis encore à apprendre le javascript, et mon peu de connaissance est m'arrêter dans mon élan.

Toute aide serait appréciée, même si c'est juste pour me guider dans la bonne direction.
Je vous remercie pour votre temps.

OriginalL'auteur wribit | 2014-02-17

  1. 14

    Avec jQuery:

    var result = $('#currentTags option').map(function(i, opt) {
  return $(opt).text();
}).toArray().join(', ');

    Dans la plaine de JavaScript, vous pouvez faire quelque chose de similaire comme ceci:

    //Convert pseudo-arrays to real arrays
var __slice = Array.prototype.slice;

//Get select options as real array
var opts = __slice.call(document.querySelectorAll('#currentTags option'));

//Map the text of each option
var result = opts.map(function(x) {
  return x.textContent;
}).join(', ');

console.log(result); //=> "Nature, Cats, Space"

    L'avantage d'abstraction des éléments dans les collections de la place de la boucle est de vous assurer la cohérence de l'API (comme jQuery), et vous n'avez pas besoin de créer d'autres variables de la boucle de pseudo-tableaux, comme de véritables tableaux peuvent utiliser toutes les méthodes de tableau.

    Voir le MDN pour en savoir plus sur les DOM et les méthodes et propriétés que vous pouvez utiliser, comme querySelectorAll, children, textContent et plus.

    Edit: Cela devrait fonctionner dans IE9+, et tous les navigateurs modernes.

    C'est incroyablement complexe pour un nouveau venu, sans explication de ce que chaque section fait. Je le recommande offrant plus d'explication de chaque ligne
    Également pas une bonne idée de traiter l'hôte des objets comme des indigènes, il échouera dans les différentes versions de IE au moins.
    J'ai ajouté quelques commentaires et une version jQuery. Vous ne savez pas comment le rendre plus facile sans plonger dans ce pseudo-tableaux et de la cartographie est, et ce serait une toute autre question.
    Cela fonctionne aujourd'hui, dans les navigateurs modernes, IE9+ autant que je sache.
    Je vous remercie pour votre réponse rapide! fonctionne bien, même si je suis le seul à comprendre certaines de ses parties. Je vais être à la recherche dans tout cela, pour me familiariser, et aussi à la documentation que vous avez lié. Merci encore!

    OriginalL'auteur elclanrs

  2. 1

    La plaine vieux javascript (POJS) est de demander l'sélectionnez les options de collecte, puis la boucle au-dessus pour obtenir les valeurs de et de générer une chaîne de caractères avec le format requis, par exemple

    var options = document.getElementById('currentTags').options;
var values = [];

for (var i=0, iLen=options.length; i<iLen; i++) {
  values.push(options[i].text);
}

alert(values.join(','));

    Vous pouvez écrire en forme plus concise, mais les performances peuvent souffrir et selon les fonctionnalités utilisées, peut échouer dans certains navigateurs. Le ci-dessus met l'accent sur la clarté et la maintenabilité du code, les performances seront au moins aussi rapide que toute autre alternative.

    Je dois avouer que je ne comprends votre version de la meilleure que je n' @elclanrs l'instant, ce qui est un plus. Je voudrais savoir ce que vous entendez par "peut échouer" dans certains navigateurs.
    elclanrs solution passe par un objet hôte (le NodeList retournée par querySelctorAll) pour un javascript natif de la méthode (Array.le prototype.tranche ce. Alors que les tranche méthode est générique, hôte des objets ne sont pas tenus de se comporter comme des objets natifs dans cette circonstance, par conséquent, il ne devrait pas être invoquée. Dans les navigateurs comme IE 8 et inférieur, ce scénario est connu à l'échec. L'approche ci-dessus est conforme avec le W3C DOM specifictions, ECAM-262, divers publié le navigateur de documents et les navigateurs à utiliser et a donc une très faible probabilité de défaillance à cet égard.
    Ah, ok merci pour la clarification. Nous sommes seulement à se soucier de navigateurs à partir de trois générations. Même si je sais que certaines personnes utilisent encore d'anciennes versions - ce site particulier, je suis en train de construire est un passe-temps de l'emplacement de la mine, ce qui n'est pas un souci pour moi. Même si c'est de l'information précieuse pour n'importe quel site que je pourrais faire dans le futur, donc merci encore!
    Je ne comprends pas. Vous avez le choix de 5 lignes de code qui ne fonctionne que dans "les navigateurs modernes" (il échouera dans IE 8 pour plus de 1 de la raison, qui est dans la gamme des "trois generatsion il y a"), ou 5 lignes de code qui fonctionne dans tous les navigateurs revenir à IE 5.5 (remplacer pousser avec affectation directe et de revenir à IE 4) et l'équivalent. Je n'ai pas de soins qui répondent à vous accepter, mais de le faire avec les yeux ouverts.

    OriginalL'auteur RobG

  3. 1

    Que diriez-vous simplement:

    var tags = [];
$('#currentTags option').each(function() {
    tags.push($(this).val());
});

console.log(tags.join(', ')); //'Nature, Cats, Space'

    http://jsfiddle.net/wN2Dk/

    OriginalL'auteur Julien Iafrancesco

  4. 1

    Ici est une simple jQuery exemple:

    var arr = []; //create array

$('#currentTags').children().each(function() {
    arr.push($(this).text()); //add option text to array
});

alert(arr.join(', ')); //Nature, Cats, Space

    Si vous voulez l'option value, commutateur text() à val() 😉

    OriginalL'auteur Tomanow

  5. 1

    Une solution simple serait:

    //Initialize your string
var output_string = "";

//For each 'option' tag, append its value to the string with the comma
$('#currentTags option').each(function() {
    output_string = output_string+this.text;
});

//Removing the last ', ' which were added during the loop
output_string = output_string.substr(0, output_string.length-2);

    Voici un Violon pour le voir en action 🙂

    Désolé :P, j'ai pris votre modification en compte.
    Presque... maintenant $(this).text() besoin d'être juste this.text. 😉 Directe l'accès à la propriété sera toujours beaucoup plus rapide (et moins d'écrire) que l'appel de fonctions pour faire la même chose.

    OriginalL'auteur Littm