更新外部HTML后獲取下拉列表的顯示值

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 ：

select_box = document.getElementById(id);

但這似乎毫無意義，並給您留下了兩行沒有實際用途的額外代碼。