Javascript / jQuery: Legen Sie Werte (Auswahl) in einer Mehrfachauswahl fest

100

Ich habe eine Mehrfachauswahl:

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

Ich lade Daten aus meiner Datenbank. Dann habe ich eine Zeichenfolge wie diese:

var values="Test,Prof,Off";

Wie kann ich diese Werte in der Mehrfachauswahl festlegen? Ich habe bereits versucht, die Zeichenfolge in einem Array zu ändern und als Wert in das Vielfache einzufügen, funktioniert aber nicht ...! Kann mir jemand dabei helfen? VIELEN DANK!!!

Zwen2012
quelle

Antworten:

133

Durchlaufen Sie die Schleife mit dem Wert in einem dynamischen Selektor, der den Attributselektor verwendet.

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

Arbeitsbeispiel http://jsfiddle.net/McddQ/1/

Kevin Bowersox
quelle
1
Das ist cool, aber wie sagt man, dass die ausgewählten Werte in der "Mehrfachauswahl" mit der ID = Zeichenfolge ausgewählt werden sollten?
Zwen2012
@ user1824136 Ausgezeichnet, ich bin froh, dass ich heute Morgen jemandem helfen konnte!
Kevin Bowersox
1
Wenn wir sowieso auf jQuery angewiesen sind, bevorzugen wir ŁukaszW.pl $('#strings').val(values.split(',')). Ohne jQuery erreicht ŁukaszW.pls Plain Old Javascript document.getElementById('strings').value = ["Test", "Prof", "Off"]auch einen
Einzeiler
109

in jQuery:

$("#strings").val(["Test", "Prof", "Off"]);

oder in reinem JavaScript:

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

jQuery führt hier eine signifikante Abstraktion durch.

ŁukaszW.pl
quelle
1
Dies funktionierte perfekt für mich und meine 'Auserwählten' müssen ... alle Werte auf einmal addieren (genau wie Sie oben sagen)
Todd Vance
4
Hmm, das reine Javascript funktioniert bei mir nicht auf Chrome / Mac oder FF / Mac. Es hat keine Auswirkung darauf, was tatsächlich ausgewählt wurde, zumindest was visuell im Browser ausgewählt erscheint.
Bill Keese
3
Es funktioniert, wenn ich einen String übergebe, aber nicht, wenn ich ein Array übergebe.
Ravi G
Das gleiche Problem haben; Dies funktioniert nur mit Zeichenfolgenwerten, nicht mit Arrays (mit einfachem JS, nicht mit jQuery).
Jayp
1
Bei Problemen sollten Sie sicherstellen, dass Sie nach dem Festlegen des Werts in JavaScript ein Änderungsereignis auslösen. Bei Verwendung von jQuery wäre dies $ ("# strings"). Val (["Test", "Prof", "Off"]). Trigger ('change');
Jon Wyatt
20

Stellen Sie der Funktion jQuery val einfach ein Array von Werten zur Verfügung:

var values = "Test,Prof,Off";
$('#strings').val(values.split(','));

Und um die ausgewählten Werte im gleichen Format zu erhalten:

values = $('#strings').val();
PostureOfLearning
quelle
8

Reine JavaScript ES6-Lösung

  • Fangen Sie jede Option mit einer querySelectorAllFunktion ab und teilen Sie die valuesZeichenfolge.
  • Verwenden Sie Array#forEachdiese Option, um jedes Element aus dem valuesArray zu durchlaufen .
  • Verwenden Array#findSie diese Option, um die Option zu finden, die dem angegebenen Wert entspricht.
  • Setzen Sie das selectedAttribut auf true.

Hinweis : Array#fromTransformiert ein Array-ähnliches Objekt in ein Array. Anschließend können Sie Array.prototypeFunktionen wie Suchen oder Zuordnen verwenden .

var values = "Test,Prof,Off",
    options = Array.from(document.querySelectorAll('#strings option'));

values.split(',').forEach(function(v) {
  options.find(c => c.value == v).selected = true;
});
<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

freundlicher Benutzer
quelle
2

Machen Sie im Grunde genommen eine values.split(',')und durchlaufen Sie dann das resultierende Array und stellen Sie die Auswahl ein.

Kashipai
quelle
1

Reine JavaScript ES5-Lösung

Aus irgendeinem Grund verwenden Sie weder jQuery noch ES6? Dies könnte Ihnen helfen:

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}
<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On" selected>On</option>
</select>

Mariano Desanze
quelle
0
var groups = ["Test", "Prof","Off"];

    $('#fruits option').filter(function() {
      return groups.indexOf($(this).text()) > -1; //Options text exists in array
    }).prop('selected', true); //Set selected
Mitglied con
quelle
0

Dies ist ein Fehler in einigen Antworten für Ersetzen |

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

Diese Korrektur ist korrekt, aber die | Am Ende sollte es so aussehen \ |

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);
Xavier Moreno
quelle