web-dev-qa-db-fra.com

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

J'ai plusieurs sélections:

<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 de ma base de données. Ensuite, j'ai une chaîne comme ceci:

var values="Test,Prof,Off";

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

javascriptjquerymultiple-select
86
Zwen2012

Parcourez la boucle en utilisant la valeur d'un sélecteur dynamique utilisant 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/

115
Kevin Bowersox

dans jQuery:

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

ou en JavaScript pur:

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.

92
ŁukaszW.pl

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();
16
PostureOfLearning

Solution Pure JavaScript ES6

  • Attrapez chaque option avec une fonction querySelectorAll et divisez la chaîne values.
  • Utilisez Array#forEach pour parcourir tous les éléments du tableau values.
  • Utilisez Array#find pour rechercher l’option correspondant à la valeur donnée.
  • Définissez son attribut selected sur true.

Remarque : Array#from transforme un objet semblable à un tablea en un tableau, puis vous pouvez utiliser des fonctions _Array.prototype_ telles que find ou 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

Fondamentalement, faites un values.split(',') puis faites une boucle dans le tableau résultant et définissez la sélection.

1
kashipai

Solution Pure JavaScript ES5

Pour une raison quelconque, vous n'utilisez ni 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>
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