Question

我有一个简单的问题。我有一个这样的选择列表：

var myarray = ["one", "two", "three"];
var container = document.createElement("select");  
for (var i = 0; i < myarray.length; i++) {
    var element = document.createElement("option");
    var textlabel = document.createTextNode(myarray[i]);

    if (element.nodeValue == "two") { 
        element.selected = true;
    }

    element.appendChild(textlabel); 
    container.appendChild(element);
}
document.body.appendChild(container);

我有两个问题：

1）我很确定现在应该选择的元素是“两个”......不是吗？

2）由于option元素是在循环内部创建的（我没有三个不同的选项变量供我玩，但只有一个随着循环前进而更新），我该怎么办参考选定的一个用于将来的用途？

例如，想象一下，稍后我会收到用户输入，并根据该输入我希望此列表具有选定项目“3”。

感谢您的帮助！如果你想使用它，这是fiddle ......

Answer 1

只需在for循环中更改以下内容即可解决选择问题：

if (myarray[i] == "two")

Answer 2

1）我很确定应该立即选择的元素是“两个”......不是吗？

不，不是：你检查了element.nodeValue，而实际上你应该检查textLabel的一个 - 或只是内容本身：

if (myarray[i] === 'two') {
  element.selected = true;
}

2）因为选项元素是在一个内部创建的循环（我没有三个不同的选项变量可以播放有，但只有一个随着循环的进行而得到更新），怎么做我引用所选的一个用于将来的用途？

请参阅<select>元素有两个有用的属性：options（包含其中的所有选项，并动态更新）和selectedIndex。您可以将它们组合起来以获得所选的选项：

container.addEventListener('change', function() {
   console.log(this.options[this.selectedIndex]);
}, false);

但如果您想要知道所选元素的值，那就更容易了 - 使用container.value。

例如，想象一下，稍后我会得到用户输入，并根据那个输入我希望这个列表有一个选定的项目，“三个”。

如果您知道与此对应的选项的位置，那就是小菜一碟：再次使用selectedIndex属性：

container.selectedIndex = 3;

Answer 3

尝试使用console.log（在chrome或firefox上使用firebug）来调试脚本：

尝试this：

var myarray = ["one", "two", "three"];
var container = document.createElement("select");
container.id = "mySelect" ;  
    for (var i = 0; i < myarray.length; i++) {
        var element = document.createElement("option");
        var textlabel = document.createTextNode(myarray[i]);

        element.appendChild(textlabel);   

        if (element.value == "two") { 
            element.selected = true;

        }

        container.appendChild(element);
    }
        document.body.appendChild(container);

为了引用您选择的元素，您应该为您的select元素指定一个id并访问它，如下所示：

el = document.getElementById('mySelect');
el.selectedIndex ; // give you the selected index
el.options[el.selectedIndex]; // give you the value

当“选项”不是静态时，如何引用“选择”列表的选定值？

3 个答案: