Question

我有一个下拉列表，我按以下方式构建：

var id = ...
var select_box = document.getElementById(id);
var options = '';
for(var i = 0; i < size; i++) {  
    options += '<option value=\"' + i + '\">' + i + '</option>'; 
}
var out = '<select id=\"' + id + '\">' + options + '</select>';
select_box.outerHTML = out;

稍后在代码中我尝试获取其显示值

var selected_value = select_box.value;

我得到的值是一个空字符串，为什么？如何获取用户选择的当前值？

注意：我以这种方式构建选择框以提高性能。

Answer 1

当您将select_box.outerHTML设置为新值时，实际上您将替换整个元素，因此select_box将指向不再显示在页面上的下拉列表。为什么不改为修改innerHTML？

var id = ...
var select_box = document.getElementById(id);
var options = '';
for(var i = 0; i < size; i++) {  
    options += '<option value=\"' + i + '\">' + i + '</option>'; 
}
select_box.innerHTML = options;

编辑：显然上述内容在IE 9中不起作用，但这应该有更广泛的浏览器支持：

for(var i = 0; i < size; i++) {  
    select_box.appendChild(makeOption(i, i));
}

function makeOption(value, display) {
    var option = document.createElement("option");
    option.setAttribute("value", value);
    option.textContent = display;
    return option;
}

最后，简单的选项是在您通过将此行添加到原始代码后覆盖重新 - 选择select_box：

select_box = document.getElementById(id);

但这看起来似乎毫无意义，并且留下了两行额外代码，没有任何实际用途。

更新其outerHTML后获取下拉列表的显示值

1 个答案: