définir l'option "selected" attribut de l'option de création dynamique
J'ai une option de sélection créée dynamiquement à l'aide d'une fonction javascript. l'objet select est
<select name="country" id="country">
</select>
lorsque la fonction js est exécutée, l'objet "pays" est
<select name="country" id="country">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
...
<option value="ID">Indonesia</option>
...
<option value="ZW">Zimbabwe</option>
</select>
et en affichant "Indonésie" comme option sélectionnée par défaut. remarque: il n'y a pas d'attribut selected="selected" dans cette option.
alors je dois définir l'attribut selected="selected" sur "Indonésie", et je l'utilise
var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");
en utilisant firebug, je peux voir que l'option "Indonésie" est comme ça
<option value="ID" selected="selected">Indonesia</option>
mais cela échoue dans IE (testé dans IE 8).
et puis j'ai essayé d'utiliser jQuery
$( function() {
$("#country option:selected").attr("selected", "selected");
});
il échoue à la fois dans FFX et IE.
J'ai besoin de l'option "Indonésie" pour avoir l'attribut selected="selected" afin que lorsque je clique sur le bouton de réinitialisation, il sélectionne à nouveau "Indonésie".
changer la fonction js pour créer dynamiquement des options "pays" n'est pas une option. la solution doit fonctionner à la fois dans FFX et IE.
je vous remercie
Bonne question. Vous devrez modifier le code HTML lui-même plutôt que de vous fier aux propriétés DOM.
var opt = $("option[val=ID]"),
html = $("<div>").append(opt.clone()).html();
html = html.replace(/\>/, ' selected="selected">');
opt.replaceWith(html);
Le code saisit l'élément option pour Indonesia, le clone et le place dans une nouvelle division (pas dans le document) pour récupérer la chaîne HTML complète: <option value="ID">Indonesia</option>.
Il effectue ensuite un remplacement de chaîne pour ajouter l'attribut selected="selected"en tant que chaîne, avant de remplacer l'option d'origine par celle-ci.
Je l'ai testé sur IE7. Regardez-le avec le bouton de réinitialisation qui fonctionne correctement ici: http://jsfiddle.net/XmW49/
Vous y pensez trop:
var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
Au lieu de modifier le code HTML lui-même, vous devez simplement définir la valeur pour laquelle vous souhaitez un élément select:
$(function() {
$("#country").val("Indonesia");
});
// get the OPTION we want selected
var $option = $('#SelectList').children('option[value="'+ id +'"]');
// and now set the option we want selected
$option.attr('selected', true);
Tant de mauvaises réponses!
Pour spécifier la valeur à laquelle un champ de formulaire doit revenir lors de la réinitialisation du formulaire, utilisez les propriétés suivantes:
- Case à cocher ou bouton radio:
defaultChecked - Tout autre contrôle
<input>:defaultValue - Option dans une liste déroulante:
defaultSelected
Donc, pour spécifier l’option actuellement sélectionnée comme option par défaut:
var country = document.getElementById("country");
country.options[country.selectedIndex].defaultSelected = true;
Il peut être judicieux de définir la valeur defaultSelected pour chaque option, si l'une d'elles avait déjà été définie:
var country = document.getElementById("country");
for (var i = 0; i < country.options.length; i++) {
country.options[i].defaultSelected = i == country.selectedIndex;
}
Maintenant, lorsque le formulaire est réinitialisé, l'option sélectionnée sera celle que vous avez spécifiée.
Ce que vous voulez faire est de définir l'attribut selectedIndex de la zone de sélection.
country.options.selectedIndex = index_of_indonesia;
Changer l'attribut 'sélectionné' ne fonctionnera généralement pas dans IE. Si vous vraiment voulez le comportement que vous décrivez, je vous suggère d'écrire une fonction de réinitialisation javascript personnalisée pour réinitialiser toutes les autres valeurs du formulaire à leur valeur par défaut.
Cela fonctionne dans FF, IE9
var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
// Get <select> object
var sel = $('country');
// Loop through and look for value match, then break
for(i=0;i<sel.length;i++) { if(sel.value=="ID") { break; } }
// Select index
sel.options.selectedIndex = i;
Begitu loh.
Réalisez que c’est une vieille question, mais avec la nouvelle version de JQuery, vous pouvez maintenant effectuer les opérations suivantes:
$("option[val=ID]").prop("selected",true);
Ceci accomplit la même chose que la réponse sélectionnée par Box9 sur une ligne.
Cela devrait marcher.
$("#country [value='ID']").attr("selected","selected");
Si vous avez des appels de fonction liés à l’élément, suivez-le avec quelque chose comme
$("#country").change();
select = document.getElementById('selectId');
var opt = document.createElement('option');
opt.value = 'value';
opt.innerHTML = 'name';
opt.selected = true;
select.appendChild(opt);
Vous pouvez rechercher toutes les valeurs d’option jusqu’à ce qu’il trouve la bonne.
var defaultVal = "Country";
$("#select").find("option").each(function () {
if ($(this).val() == defaultVal) {
$(this).prop("selected", "selected");
}
});
J'essayais quelque chose comme ceci en utilisant la fonction $(...).val(), mais la fonction n'existait pas. Il s'avère que vous pouvez définir manuellement la valeur de la même manière que pour un <input>:
// Set value to Indonesia ("ID"):
$('#country').value = 'ID'
... et il est automatiquement mis à jour dans la sélection. Fonctionne sur Firefox au moins; vous voudrez peut-être l'essayer chez les autres.
Les idées sur cette page ont été utiles, mais comme toujours mon scénario était différent. Ainsi, dans le nœud modal bootstrap/express du nœud js/aws, cela a fonctionné pour moi:
var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");
Où mon select ID = "cJourney" et la liste déroulante ont été stockés dans la variable: vcJourney
Pour définir l'option d'entrée au moment de l'exécution, essayez de définir la valeur "vérifié". (même si ce n'est pas une case à cocher)
elem.checked=true;
Où elem est une référence à l'option à sélectionner.
Donc pour le problème ci-dessus:
var country = document.getElementById("country");
country.options[country.options.selectedIndex].checked=true;
Cela fonctionne pour moi, même lorsque les options ne sont pas emballées dans un fichier.
Si toutes les balises partagent le même nom, elles doivent décocher la case lorsque la nouvelle est cochée.
Rendre l'option defaultSelected
HTMLOptionElement.defaultSelected = true; // JS
$('selector').prop({defaultSelected: true}); // jQuery
Si l'élément SELECT est déjà ajouté au document (de manière statique ou dynamique), définissez une option sur Attribut -selected et définissez-la survivant une HTMLFormElement.reset() - defaultSelected est utilisée. :
const EL_country = document.querySelector('#country');
EL_country.value = 'ID'; // Set SELECT value to 'ID' ("Indonesia")
EL_country.options[EL_country.selectedIndex].defaultSelected = true; // Add Attribute selected to Option Element
document.forms[0].reset(); // "Indonesia" is still selected<form>
<select name="country" id="country">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="HR">Croatia</option>
<option value="ID">Indonesia</option>
<option value="ZW">Zimbabwe</option>
</select>
</form>Ce qui précède fonctionnera également si vous créez les options de manière dynamique , puis que ( uniquement après ) vous voulez définir une option comme étant defaultSelected.
const countries = {
AF: 'Afghanistan',
AL: 'Albania',
HR: 'Croatia',
ID: 'Indonesia',
ZW: 'Zimbabwe',
};
const EL_country = document.querySelector('#country');
// (Bad example. Ideally use .createDocumentFragment() and .appendChild() methods)
EL_country.innerHTML = Object.keys(countries).reduce((str, key) => str += `<option value="${key}">${countries[key]}</option>`, '');
EL_country.value = 'ID';
EL_country.options[EL_country.selectedIndex].defaultSelected = true;
document.forms[0].reset(); // "Indonesia" is still selected<form>
<select name="country" id="country"></select>
</form>
Définir l'option par défautSélectionné lors de la création dynamique d'options
Pour créer une option selected lors du remplissage de l'élément SELECT , utilisez le constructeur Option() MDN
var optionElementReference = new Option(text, value, defaultSelected, selected);
const countries = {
AF: 'Afghanistan',
AL: 'Albania',
HR: 'Croatia',
ID: 'Indonesia', // <<< make this one defaultSelected
ZW: 'Zimbabwe',
};
const EL_country = document.querySelector('#country');
const DF_options = document.createDocumentFragment();
Object.keys(countries).forEach(key => {
const isIndonesia = key === 'ID'; // Boolean
DF_options.appendChild(new Option(countries[key], key, isIndonesia, isIndonesia))
});
EL_country.appendChild(DF_options);
document.forms[0].reset(); // "Indonesia" is still selected<form>
<select name="country" id="country"></select>
</form>Dans la démo ci-dessus, Document.createDocumentFragment est utilisé pour empêcher le rendu des éléments dans le DOM dans une boucle. Au lieu de cela, le fragment (contenant toutes les options) est ajouté à la sélection une seule fois.
SELECT.value vs. OPTION.setAttribute vs. OPTION.selected vs. OPTION.defaultSelected
Bien que certains navigateurs (plus anciens) interprètent l'attribut selected de l'OPTION comme un état "chaîne", les spécifications WHATWG HTML html.spec.whatwg.org indique qu'il doit représenter un booléen selectedness
La sélection d'un élément d'option est un état booléen , initialement faux. Sauf indication contraire, lors de la création de l'élément, sa sélection doit être définie sur true si l'élément a un attribut sélectionné.
html.spec.whatwg.org - Choix de l'option
on peut correctement en déduire que seul le nom selected dans <option value="foo" selected> suffit pour définir un état de vérité.
Test de comparaison des différentes méthodes
const EL_select = document.querySelector('#country');
const TPL_options = `
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="HR">Croatia</option>
<option value="ID">Indonesia</option>
<option value="ZW">Zimbabwe</option>
`;
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
const mutationCB = (mutationsList, observer) => {
mutationsList.forEach(mu => {
const EL = mu.target;
if (mu.type === 'attributes') {
return console.log(`* Attribute ${mu.attributeName} Mutation. ${EL.value}(${EL.text})`);
}
});
};
// (PREPARE SOME TEST FUNCTIONS)
const testOptionsSelectedByProperty = () => {
const test = 'OPTION with Property selected:';
try {
const EL = [...EL_select.options].find(opt => opt.selected);
console.log(`${test} ${EL.value}(${EL.text}) PropSelectedValue: ${EL.selected}`);
} catch (e) {
console.log(`${test} NOT FOUND!`);
}
}
const testOptionsSelectedByAttribute = () => {
const test = 'OPTION with Attribute selected:'
try {
const EL = [...EL_select.options].find(opt => opt.hasAttribute('selected'));
console.log(`${test} ${EL.value}(${EL.text}) AttrSelectedValue: ${EL.getAttribute('selected')}`);
} catch (e) {
console.log(`${test} NOT FOUND!`);
}
}
const testSelect = () => {
console.log(`SELECT value:${EL_select.value} selectedIndex:${EL_select.selectedIndex}`);
}
const formReset = () => {
EL_select.value = '';
EL_select.innerHTML = TPL_options;
// Attach MutationObserver to every Option to track if Attribute will change
[...EL_select.options].forEach(EL_option => {
const observer = new MutationObserver(mutationCB);
observer.observe(EL_option, {attributes: true});
});
}
// -----------
// LET'S TEST!
console.log('\n1. Set SELECT value');
formReset();
EL_select.value = 'AL'; // Constatation: MutationObserver did NOT triggered!!!!
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
console.log('\n2. Set HTMLElement.setAttribute()');
formReset();
EL_select.options[2].setAttribute('selected', true); // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
console.log('\n3. Set HTMLOptionElement.defaultSelected');
formReset();
EL_select.options[3].defaultSelected = true; // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
console.log('\n4. Set SELECT value and HTMLOptionElement.defaultSelected');
formReset();
EL_select.value = 'ZW'
EL_select.options[EL_select.selectedIndex].defaultSelected = true; // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
/* END */
console.log('\n*. Getting MutationObservers out from call-stack...');<form>
<select name="country" id="country"></select>
</form>Bien que le test 2. utilisant .setAttribute() semble au début la meilleure solution car la propriété et l'attribut de l'élément sont à l'unisson, cela peut créer de la confusion , spécialement parce que .setAttribute attend deux paramètres:
EL_select.options[1].setAttribute('selected', false);
// <option value="AL" selected="false"> // But still selected!
fera effectivement l'option sélectionnée
Doit-on utiliser .removeAttribute() ou peut-être .setAttribute('selected', ???) à une autre valeur? Ou faut-il lire l'état en utilisant .getAttribute('selected') ou en utilisant .hasAttribute('selected')?
Au lieu de cela, le test 3. (et 4.) en utilisant defaultSelected donne les résultats attendus :
- Attribut
selecteden tant qu'état sélectionné . - Propriété
selectedsur l'objet Element, avec une valeur booléenne .