代码之家 › 专栏 › 技术社区 › Jeff Ancel

动态javascript选择下拉列表

dhtml html javascript

1

Jeff Ancel · 技术社区 · 14 年前

这很有趣。在一个select下拉列表中,我试图不使用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>

但这里的异常情况是(至少在火狐中),所选选项最终是选项0,而不是所选的dom元素。在IE6中,此选择下拉列表根本不起作用。

有一种替代方法可以工作,其中包括手动将选项拼凑在一起,它可以在我测试过的所有浏览器中工作。

5 回复 | 直到 12 年前

1

4

Cá´ÊÊ bcherry 14 年前

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

selected = "selected"

2

CodeSchiDDer 12 年前

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

3

1

Randy the Dev 14 年前

options.selectedIndex = 1;

4

0

Jeff Ancel 14 年前

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

5

0

Purge 14 年前

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

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

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

options[1].selected = true;