Question

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

例如：

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

我试图动态更改上面的值＆＃34; name1＆＃34;和＆＃34; name2＆＃34;等等来自本地.js文件的值。目前，我已成功使用以下代码段在html页面上编写的.js文件中的值：

<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

您可以尝试设置每个innerText元素的option属性：

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

请参阅此Fiddle。

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

选择子项的另一种方法是为每个选项设置ID属性，并在每个document.selectElementById元素上使用option。

Answer 2

从头开始创建选项并将其添加到下拉列表中。标签是文本，值是值。

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

Answer 3

以下是动态加载下拉列表 [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);
    }

Answer 4

我的想法：

HTML：

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

使用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];
    }
}

javascript将'innerHTML'属性设置为从数组中取出的名称字符串。不像Dissident Rage的版本那么优雅但更短：D

Answer 5

这是一个非常快速的jQuery方法，你可以使用

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

您的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>");
}

Answer 6

$("#usernameDropDown option").each(function(){
   if($(this).html() == "name1")
   {
     $(this).html(name1)
   } 
   if($(this).html() == "name2")
   {
     $(this).html(name2)
   } 
   if($(this).html() == "name3")
   {
     $(this).html(name3)
   } 
});

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

6 个答案: