javascript 动态javascript选择下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3766430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic javascript select dropdown
提问by Jeff Ancel
This was interesting. In a select dropdown, trying not to use jQuery (with the exception of easing some of my pain on recreation), I ran into an issue that doesn't properly let any current browsers catch the proper selected option. Here is my code, for the page that recreates the issue (remember, no jQuery to necessarily solve issue, but more or less just telling me what I am doing wrong.
这很有趣。在选择下拉列表中，尝试不使用 jQuery（除了减轻我在娱乐方面的一些痛苦之外），我遇到了一个问题，即无法正确地让任何当前浏览器捕获正确的选定选项。这是我的代码，用于重新创建问题的页面（请记住，没有 jQuery 必须解决问题，但或多或少只是告诉我我做错了什么。
This one has me stumped.
这个难倒我了。
<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>
The html this creates is:
这创建的 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>
But the anomaly here is that (in firefox at least), the selected option ends up being Option 0, which isn't the selected DOM element. In IE6, this select dropdown doesn't work at all.
但这里的异常是（至少在 firefox 中），选定的选项最终是选项 0，它不是选定的 DOM 元素。在 IE6 中，这个选择下拉菜单根本不起作用。
There is an alternate method that does work, which includes piecing the options together manually, which works in all browsers that I have tested.
有一种替代方法确实有效，包括手动将选项拼凑在一起，它适用于我测试过的所有浏览器。
回答by C???
A small change made it work for me in Firefox:
一个小小的改变使它在 Firefox 中对我有用：
...
//options[1].setAttribute("selected", "selected");
options[1].selected = true;
...
I'm manipulating the DOM element's attributes directly. Not sure why your method doesn't work. Maybe you should keep both lines so that the HTML generated has the selected = "selected"in it.
我直接操作 DOM 元素的属性。不知道为什么你的方法不起作用。也许您应该保留这两行，以便生成的 HTML 包含selected = "selected"在其中。
回答by CodeSchiDDer
some old thread - however try something like this:
一些旧线程 - 但是尝试这样的事情：
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++;
}
回答by Randy the Dev
Use selectedIndex to set the selected index of a select object.
options.selectedIndex = 1;
使用 selectedIndex 设置选定对象的选定索引。
options.selectedIndex = 1;
回答by Purge
options[1].setAttribute("selected", "selected");
is likely where your issue lies. The output you're getting is:
很可能是您的问题所在。你得到的输出是：
<option value="Value1" selected="selected">Option 1</option>
and the standard is:
标准是：
<option value="Value1" selected>Option 1</option>
You may be able to do:
你或许能够做到：
options[1].selected = true;
回答by Jeff Ancel
Here is the working code, which seems like more of a 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>
