Pour définir les données d'un élément à l'aide de JavaScript, nous attribuons la valeur et le nom de cet élément comme suit:
<form method="post" action="/post/" name="myform">
<select multiple name="myselect" id="myselect">
<option value="1">option1</option>
<option value="2">option2</option>
...
Dans le cas d'un où l'attribut multiple est présent, comment définir la valeur de cet élément de sélection? Par exemple, comment définirais-je la valeur de l'élément myselect ci-dessous:
var form = document.createElement("form");
var element = document.createElement("input");
element.value=value;
element.name=name;
J'ai essayé de définir la valeur en faisant ceci myselect .value = [1,2] mais cela ne fonctionne pas. Après avoir sélectionné option1 et option2 , je m'attendais à ce qu'il renvoie [1,2] , mais il renvoie simplement "1".
3 Réponses :
Vous pouvez accéder au tableau d'options de sélection via la propriété options de l'objet select . Chaque option a une propriété selected que vous pouvez définir.
document.myform.myselect.querySelector("option[value="+value+"]")[0].selected = true;
Vous pouvez accéder aux options par valeur à l'aide d'un sélecteur de requête:
document.myform.myselect.options[0].selected = true;
Cela fonctionne
<select name='selectMultiple' id="selectMultiple" multiple>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Bronze">Bronze</option>
</select>
<br />
Selected: <span id="spanSelectedItens"></span>
var element = document.getElementById('selectMultiple');
// Set Values
var values = ["Gold", "Bronze"];
for (var i = 0; i < element.options.length; i++) {
element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}
// Get Value
var selectedItens = Array.from(element.selectedOptions)
.map(option => option.value)
spanSelectedItens.innerHTML = selectedItens
Merci d'avoir contribué! Cela améliorerait votre réponse pour expliquer le fonctionnement de votre solution.
Pour définir par programmation plusieurs options de valeur sur une sélection multiple, vous devez ajouter manuellement les attributs selected aux éléments que vous souhaitez sélectionner.
Une approche à cela est la suivante:
<select multiple name="myselect" id="myselect"> <option value="1">option1</option> <option value="2">option2</option> <option value="3">option3</option> <option value="4">option4</option> </select>
const select = document.getElementById('myselect')
const selectValues = [1, 2];
/* Iterate options of select element */
for (const option of document.querySelectorAll('#myselect option')) {
/* Parse value to integer */
const value = Number.parseInt(option.value);
/* If option value contained in values, set selected attribute */
if (selectValues.indexOf(value) !== -1) {
option.setAttribute('selected', 'selected');
}
/* Otherwise ensure no selected attribute on option */
else {
option.removeAttribute('selected');
}
}
Votre question a déjà des réponses ici stackoverflow.com/questions/11821261/...
Essayez-vous de sélectionner plusieurs éléments en même temps dans votre menu?
La question liée à @YongQuan ne semble pas liée, je pense que eggandegg demande comment définir
, et non obtenir toutes les options ou la sélection option.