javascript - HTML 选择 : how to set drop down text

Question

如何将 HTML 下拉列表的文本值设置为外部文本或 .js 文件中的值/变量。 (将在下拉列表中显示的值)

例如:

 <select id="usernameDropDown">
 <option value="username1">name1</option>
 <option value="username2">name2</option>
 <option value="username3">name3</option>
 </select>

我正在尝试将上述“name1”和“name2”等值动态更改为本地 .js 文件中的值。目前，我使用以下代码段成功地将 .js 文件中的值写入 html 页面:

<script src="jstest.js" type="text/javascript"></script>

<script Language='JavaScript'>
document.write(name1)
document.write(name2)
document.write(name3)

document.write(CSRUsername1)
document.write(CSRUsername2)
document.write(CSRUsername3)
</script>

当前 .js 文件的设置如下:

var name1="Alpha" 
var name2="Bravo"
var name3="Charlie"
var name4="Delta"
var name5="Echo"

是否有任何方法可以使用文本文件或 .js 文件中的值来设置此文本值？如果可能的话，我想仅将解决方案保留在 html/java 脚本中..

Answer 1

以下是如何动态加载下拉列表 [Fiddle] 。

HTML

<select id="usernameDropDown">
    <option>Choose a user</option>
</select>

Javascript

    var select = document.getElementById("usernameDropDown");
    var unames = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
    for (var i = 0; i < unames.length; i++) {
        var opt = unames[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }