javascript dynamique sélectionnez dropdown

C'était intéressant. Dans une liste déroulante, en essayant de ne pas utiliser jQuery (à l'exception de réduire ma douleur sur les loisirs), j'ai rencontré un problème qui ne permet pas aux navigateurs actuels d'attraper correctement l'option sélectionnée. Voici mon code, pour la page qui recrée la question (rappelez-vous, pas de jQuery pour résoudre nécessairement problème, mais plus ou moins me dire ce que je fais mal.javascript dynamique sélectionnez dropdown

Celui-ci m'a déconcerté.

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 

<div id="select-holder" /> 
<input id="some-button" type="button"> 

<script type="text/javascript"> 

$("#some-button").click(function(){ 

    var select_element = document.createElement('select'); 
    select_element.setAttribute("id", "some-id"); 
    select_element.setAttribute("name", "some-name"); 

    var options = new Array(); 
    for (var i = 0; i < 3; i++){ 
     options.push(new Option("Option " + i, "Value" + i, false, false)); 
    } 
    options[1].setAttribute("selected", "selected"); 

    for (var option in options){ 
     select_element.appendChild(options[option]); 
    } 

    $("#select-holder").append(select_element); 
}); 

</script> 
</body> 
</html>

le html est ce qui crée:

<select id="some-id" name="some-name"> 
    <option value="Value0">Option 0</option> 
    <option value="Value1" selected="selected">Option 1</option> 
    <option value="Value2">Option 2</option> 
</select>

Mais l'anomalie est que (dans Firefox au moins), l'option sélectionnée finit par être l'option 0, ce qui est l'élément DOM sélectionné dans IE6, cela. sélectionnez la liste déroulante ne fonctionne pas du tout

Il existe une autre méthode qui fonctionne, qui consiste à assembler les options manuellement, ce qui fonctionne dans tous les navigateurs que j'ai testés.

Source

2010-09-22 Jeff Ancel

Un petit changement fait fonctionner pour moi dans Firefox:

... 
//options[1].setAttribute("selected", "selected"); 
options[1].selected = true; 
...

Je manipuler les attributs de l'élément DOM directement. Vous ne savez pas pourquoi votre méthode ne fonctionne pas. Peut-être que vous devriez garder les deux lignes de sorte que le HTML généré a le selected = "selected" dedans.

Source

2010-09-22 05:06:25

IE6 ne fonctionne pas, mais pas sûr que cela m'importe. Si vous avez des suggestions pour IE6 cependant, j'apprécierais. Cela a fonctionné parfaitement dans Firefox. –

Voici le code de travail, qui ressemble plus à un Hack!

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 

<div id="select-holder" /> 
<input id="some-button" type="button"> 

<script type="text/javascript"> 

$("#some-button").click(function(){ 

    var select_element = document.createElement('select'); 
    select_element.setAttribute("id", "some-id"); 
    select_element.setAttribute("name", "some-name"); 


    for (var i = 0; i < 3; i++){ 
     var option_element = document.createElement('option'); 
     option_element.setAttribute('value', "Value" + i); 
     option_element.appendChild(document.createTextNode("Option " + i)); 
     if (i == 1){ 
      option_element.setAttribute("selected", "selected"); 
     } 
     select_element.appendChild(option_element); 
    } 

    $("#select-holder").append(select_element); 
}); 

</script> 
</body> 
</html>

Source

2010-09-22 05:07:38

Utilisez selectedIndex pour définir l'index sélectionné d'un objet sélectionné. options.selectedIndex = 1;

Source

2010-09-22 05:08:40

options[1].setAttribute("selected", "selected");

est probable où votre problème est. La sortie que vous obtenez est:

<option value="Value1" selected="selected">Option 1</option>

et la norme est:

<option value="Value1" selected>Option 1</option>

Vous pouvez être en mesure de le faire:

options[1].selected = true;

Source

2010-09-22 05:10:20 Purge

cela fonctionne. –

un fil vieux - cependant essayer quelque chose comme ça :

var idx=0; 
while(obj.options[idx]) { 
    if(obj.options[idx].value==value) obj.options[idx].setAttribute('selected',true); 
    else obj.options[idx].removeAttribute('selected'); 
    idx++; 
}

Source

2012-10-12 20:53:20 CodeSchiDDer

javascript dynamique sélectionnez dropdown

Répondre

Questions connexes