J'ai une sélection multiple:

<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>

Je charge les données de ma base de données. Ensuite, j'ai une chaîne comme celle-ci:

var values="Test,Prof,Off";

Comment puis-je définir ces valeurs dans la sélection multiple? J'ai déjà essayé de changer la chaîne dans un tableau et de la mettre comme valeur dans le multiple, mais ne fonctionne pas ...! Quelqu'un peut il m'aider avec ça? MERCI!!!

Parcourez la boucle à l'aide de la valeur d'un sélecteur dynamique qui utilise le sélecteur d'attribut.

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

Exemple de travail http://jsfiddle.net/McddQ/1/

dans jQuery:

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

ou en pur 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 fait ici une abstraction significative.

Fournissez simplement la fonction jQuery val avec un tableau de valeurs:

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

Et pour obtenir les valeurs sélectionnées dans le même format:

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

Solution pure JavaScript ES6

• Attrapez chaque option avec une querySelectorAllfonction et divisez la valueschaîne.
• Utilisez Array#forEachpour parcourir chaque élément du valuestableau.
• Utilisez Array#findpour trouver l'option correspondant à la valeur donnée.
• Définissez son selectedattribut sur true.

Remarque : Array#fromtransforme un semblable à un tableau objet dans un tableau et vous êtes en mesure d'utiliser des Array.prototypefonctions sur elle, comme trouver ou carte .

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>

En gros, faites une values.split(',')boucle, puis parcourez le tableau résultant et définissez Select.

Solution pure JavaScript ES5

Pour une raison quelconque, vous n'utilisez pas jQuery ni ES6? Cela pourrait vous aider:

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>

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

c'est une erreur dans certaines réponses pour remplacer |

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

cette correction est correcte mais le | En fin de compte, cela devrait ressembler à ceci \ |

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