Idiomatische jQuery um alle Optionen in einem Listenfeld in einen durch Kommas getrennten string?

Wo lb ist eine listbox, txtfield ist eine textbox diesen code nimmt alle Werte der Optionen, setzt Sie in ein array und lässt Sie in eine Komma-separierte Liste:

var arr = [];
for (var i = 0; i < lb.length; i++) {
    arr[i] = lb.options[i].value;
}
txtfield.value = arr.join(',');

lb.Optionen.toString() offenbar nicht funktioniert, weil es ein array von Optionen (Wert und text). Ich habe nicht gefunden was mehr succint als diese.

Was ist der jQuery-Weg, dies zu tun? Ich habe versucht, Herumspielen mit $(lb).each(), aber kann nicht scheinen, um es zu arbeiten in der gleichen Weise.

InformationsquelleAutor Cade Roux | 2010-11-16
  1. 13
    txtfield.value = $(lb.options).map(function() { 
                                       return this.value; 
                                   }).get().join(',');

    Diese verwendet .map() erstellen Sie ein jQuery-Objekt durch Rücksendung der value jeder option, dann verwendet .get() zu extrahieren, die das Array aus dem Objekt.

    EDIT: Als @Nick Craver bemerkt in dem Kommentar unten, wenn Sie brauchen, um optimale Leistung (mit jQuery), macht es mehr Sinn,die $.map() - Variante, da Sie bereits eine Sammlung. Siehe seine Antwort für details.

    EDIT: um bessere Leistung Zu erhalten, machen Sie Ihre for Schleife, aber cache die Verweise auf die Eigenschaften. Es einen Unterschied macht.

    var arr = [], opts = lb.options, len = opts.length;
for (var i = 0; i < len; i++) {
    arr[i] = opts[i].value;
}
txtfield.value = arr.join(',');
    • In diesen Fällen ist es weitaus besser, verwenden jQuery.map() die viel weniger verschwenderisch/schneller, Sie können es hier testen: jsperf.com/map-vs-jquery-map
    • Vielen Dank an alle für die sehr gründlich recherchierte Arbeit. Ich werde Wiegen halten, eine optimierte version der code der Schleife (das ist besser als das, was ich war refactoring in den ersten Platz) gegen etwas, was sein könnte, mehr succint oder wartbar.
    InformationsquelleAutor user113716
  2. 6

    Der jQuery-version ist .map() wie diese:

    var arr = $(lb).find("option").map(function() { return this.value; }).get();
txtfield.value = arr.join(',');

    Oder ein bisschen schneller mit $.map() wie diese:

    var arr = $.map(lb.options, function(o) { return o.value; });
txtfield.value = arr.join(',');

    Allerdings sind beide deutlich weniger effizient als ein for loop, gehen Sie mit dem einfachen JavaScript-version, die Sie bereits haben.

    InformationsquelleAutor Nick Craver
  3. 5

    Blick auf map()..

    $('#lbID option').map(function() {
  return $(this).val();
}).get().join(',');
    InformationsquelleAutor Quintin Robinson
  4. 3

    Dies ist die jQuery-äquivalent zu dem code. Es gibt elegantere Lösungen, aber.

    var values = [];

$(lb).children('option').each(function () {
   values.push($(this).text());
});

$(txtfield).val(values.join(','));
    InformationsquelleAutor jwueller
  5. 2

    Könnte es so machen, aber ich bin mir nicht sicher, was Sie zu erreichen versuchen?

    $('option', $(lb)).each(function() { arr.push($(this).text()) });
    • Verbrachte 10 Minuten zu bekommen, dass Sie arbeiten und es noch drei ähnliche Antworten schon hier!
    InformationsquelleAutor El Ronnoco
  6. 1

    Siehe demo hier: Fiddler Demo

    können Sie die mehrere ausgewählte option Text-Werte mit Trennzeichen.

    JS:

     $('#testID').change(function () {
        var test=$(this).find("option:selected").map(function () {
        return $(this).text();
    }).get().join('//');
     alert(test);
            });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
    <option value="1">test Value1</option>
    <option value="2">test Value2</option>
    <option value="3">test Value3</option>
    <option value="4">test Value4</option>
    <option value="5">test Value5</option>
    <option value="6">test Value6</option>
</select>
<input type="button" value="Get dropdown selected Value" id="select-values">
    <div id="result"></div>

    InformationsquelleAutor Jaydeep Shil
Schreibe einen Kommentar