it-swarm.com.de

Javascript / jQuery: Werte setzen (Auswahl) in einer Mehrfachauswahl

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 einstellen? 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!!!

86
Zwen2012

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/

115
Kevin Bowersox

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 macht hier bedeutende Abstraktion.

92
ŁukaszW.pl

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 selben Format zu erhalten:

values = $('#strings').val();
16

Reine JavaScript ES6-Lösung

  • Fangen Sie jede Option mit einer querySelectorAll -Funktion ab und teilen Sie die Zeichenfolge values.
  • Verwenden Array#forEach um jedes Element aus dem Array values zu durchlaufen.
  • Verwenden Array#find um die Option zu finden, die mit dem angegebenen Wert übereinstimmt.
  • Setzen Sie das Attribut selected auf true.

Hinweis : Array#from transformiert ein array-like Objekt in ein Array und dann können Sie Array.prototype funktioniert darauf, wie find oder map.

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>
6
kind user

Führe im Grunde genommen eine values.split(',') aus und durchlaufe dann das resultierende Array und setze Select.

1
kashipai

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>
1
Mariano Desanze
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
0
Member con