Javascript/jQuery : Définir les valeurs (sélection) dans une sélection multiple

Question

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 des données à partir de ma base de données. J'ai alors une chaîne de caractères comme celle-ci :

var values="Test,Prof,Off";

Comment puis-je définir cette valeur 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 la sélection multiple, mais ça ne marche pas... ! Quelqu'un peut-il m'aider ? MERCI ! !!

Answer 1

Itérer dans la boucle en utilisant la valeur dans un sélecteur dynamique qui utilise le sélecteur d'attributs.

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/

Answer 2

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 une abstraction significative ici.

Answer 3

Il suffit de fournir à la fonction jQuery val 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();

Answer 4

Solution purement JavaScript ES6

• Attrapez chaque option avec un querySelectorAll et diviser la fonction values chaîne.
• Utilisez Array#forEach pour itérer sur chaque élément du values le tableau.
• Utilisez Array#find pour trouver l'option correspondant à la valeur donnée.
• Définissez-le selected de l'attribut true .

Note : Array#from transforme un sous forme de tableau dans un tableau, puis vous pouvez utiliser l'objet Array.prototype sur elle, comme trouver o 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>

Answer 5

En gros, faites un values.split(',') puis parcourir en boucle le tableau résultant et définir le Select.