动态JavaScript选择下拉

这很有趣。在选择下拉菜单中，尽量不要使用jQuery（除了缓解一些娱乐方面的痛苦之外），我遇到了一个问题，它无法让任何当前的浏览器捕获正确的选定选项。这里是我的代码，为重现问题（请记住，没有jQuery来一定能解决问题，但或多或少只是告诉我什么，我做错了的页面。动态JavaScript选择下拉

这其中有我难住了。

<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>

此创建HTML是：

<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>

但这里的异常现象是（在Firefox至少），所选择的选项最终被选0，这不是所选的DOM元素在IE6，这一点。选择下拉菜单根本不起作用。

还有一种可行的替代方法，其中包括手动将选项拼凑在一起，该方法适用于我测试过的所有浏览器。

来源

2010-09-22 Jeff Ancel

一个小改动，感觉就对我工作在Firefox：

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

我直接操作DOM元素的属性。不知道为什么你的方法不起作用。也许你应该保留两行，以便生成的HTML包含selected = "selected"。

来源

2010-09-22 05:06:25

IE6不起作用，但不知道我在乎。如果您对IE6有任何建议，我将不胜感激。这在Firefox中完美运行。 –

这里是工作代码，它看起来更像是一个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>

来源

2010-09-22 05:07:38

使用selectedIndex设置选定对象的选定索引。 options.selectedIndex = 1;

来源

2010-09-22 05:08:40

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

可能是您的问题所在。你得到的输出是：

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

和标准是：

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

您可能能够做到：

options[1].selected = true;

来源

2010-09-22 05:10:20 Purge

这确实有用。 –

一些老话题 - 但尝试这样的事情：

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++; 
}

来源

2012-10-12 20:53:20 CodeSchiDDer

动态JavaScript选择下拉

回答

相关问题