问HTML选择:如何设置下拉文本
EN

Stack Overflow用户

提问于 2014-03-07 10:41:39

回答 6查看 6.6K关注 0票数 0

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

例如：

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

我试图将上面的"name1“和"name2”等值动态地更改为本地.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脚本中。

readfile

javascript

html

select

drop-down-menu

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-03-07 11:00:39

下面是如何动态加载一个下拉列表[小提琴]。

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

票数 2

Stack Overflow用户

发布于 2014-03-07 10:51:19

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

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

看这个小提琴。

请注意，这里您需要知道哪个子节点在哪里(例如，select的第一个子子是name1，等等)。

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

票数 2

Stack Overflow用户

发布于 2014-03-07 10:57:47

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

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