Question

这很有意思。在选择下拉列表中，尝试不使用jQuery（除了缓解我在娱乐方面的一些痛苦），我遇到了一个问题，它没有正确地让任何当前浏览器捕获正确的选定选项。这是我的代码，用于重新创建问题的页面（记住，没有jQuery必须解决问题，但或多或少只是告诉我我做错了什么。

这个让我难过。

    <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中，此选择下拉列表根本不起作用。

还有一种方法可行，包括手动拼接选项，适用于我测试过的所有浏览器。

Answer 1

一个小改动使它在Firefox中起作用：

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

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

Answer 2

一些旧线程 - 但尝试这样的事情：

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

，标准是：

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

您可以这样做：

options[1].selected = true;

动态javascript选择下拉列表

5 个答案: