Javascript HTML选择：如何设置下拉文本

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

例如：

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

是否有任何方法可以使用文本文件或.js文件中的值设置此文本值？

---

如果可能，我只想将解决方案保留为html/java脚本。

您可以尝试设置每个

选项的
innerText
属性：

var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;

看这个

请注意，此处您需要知道哪个子项在哪里（例如，
select
的第一个子项是
name1
，等等）

选择子项的另一种方法是为每个选项设置ID属性，并使用
文档。在每个
选项
元素上选择ElementByID
。
从头开始创建选项并将其添加到下拉列表中。标签是文本，值是值

var dropdown = document.getElementById('usernameDropDown');

// if dropdown exists
if(dropdown) {
    var usernames = [
        { label: 'name1', value: 'username1' },
        { label: 'name2', value: 'username2' },
        { label: 'name3', value: 'username3' }
    ];

    for(var i=0,l=usernames.length; i<l; i++) {
        var username = usernames[i];

        var option = document.createElement('option');
        option.setAttribute('value',username.value);

        var optionText = document.createTextNode(username.label);
        option.appendChild(optionText);

        dropdown.appendChild(option);
    }
}

var dropdown=document.getElementById（'usernameDropDown'）；
//如果存在下拉列表
如果（下拉列表）{
变量用户名=[
{标签：'name1'，值：'username1'}，
{标签：'name2'，值：'username2'}，
{标签：'name3'，值：'username3'}
];
对于（var i=0，l=usernames.length；i，下面是如何动态加载下拉列表

HTML


选择一个用户

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

var select=document.getElementById（“用户名下拉列表”）；
变量unames=[“Alpha”、“Bravo”、“Charlie”、“Delta”、“Echo”]；
对于（变量i=0；i
我的想法：

HTML:


名称1
姓名2
名字3

Javascript:

window.onload = init;

var names=["Alpha", "Bravo", "Charlie", "Delta", "Echo"];

function init(){
    var opts = document.getElementById("usernameDropDown").childNodes;

    for (var i=0, i<opts.length, i++){
        opts[i].innerHTML = names[i];
    }
}

window.onload=init；
变量名称=[“Alpha”、“Bravo”、“Charlie”、“Delta”、“Echo”]；
函数init（）{
var opts=document.getElementById（“用户名下拉列表”）.childNodes；
对于（var i=0，i，这里有一个非常快速的jQuery方法，您可以使用它

更新版本：
它会从阵列中动态更新您的选择

你的HTML

<select id="usernameDropDown">
 <option value="username1">Username</option>
</select>


用户名

你的javascript

var name = ["Alpha","Bravo","Charlie","Delta","Echo"];

for(i=0;i<name.length;i++){
    $("#usernameDropDown").append("<option value='name" + i + "'>" + name[i] + "</option>");
}

var name=[“Alpha”、“Bravo”、“Charlie”、“Delta”、“Echo”]；
对于（i=0；i可能会使用类似Knockout.js的东西？是什么导致选择值发生变化？@Mike，看起来这会起作用。不幸的是，这需要在我必须使用已安装的库的系统上工作…@Mark，Nah不能像上面那样使用Jquery^。太好了！正是我所需要的。我很遗憾在这方面测试了这么多不同的方法，非常感谢！如果我有未知数量的名称/用户名要添加为选项，这肯定会有所帮助。x.appendChild是我所寻找的另一种方法，谢谢！是的，这避免了选择作为答案的方法的潜在问题：如果HTML中的选项少于Javascript预期的，则会出现越界错误。@DissiDentage+1对于一个好答案，我的想法是，如果你知道有多少个
选项
元素，如果你知道要设置多少变量。你解决了我的问题，也解决了我想采取的下一步——设置每个元素的值。Fiddle也非常清楚。我选择这个元素的唯一原因是它稍微干净r、 这段代码还要求在HTML中预先指定选项，请注意，在小提琴中，选项列表仅填充为“Charlie”。
    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);
    }

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

window.onload = init;

var names=["Alpha", "Bravo", "Charlie", "Delta", "Echo"];

function init(){
    var opts = document.getElementById("usernameDropDown").childNodes;

    for (var i=0, i<opts.length, i++){
        opts[i].innerHTML = names[i];
    }
}

<select id="usernameDropDown">
 <option value="username1">Username</option>
</select>

var name = ["Alpha","Bravo","Charlie","Delta","Echo"];

for(i=0;i<name.length;i++){
    $("#usernameDropDown").append("<option value='name" + i + "'>" + name[i] + "</option>");
}