Javascript<选择>输出

Javascript <select> output

本文关键字：输出 gt 选择 Javascript lt      更新时间：2023-09-26

我给出了两个<select>控件，第二个控件的值应该根据第一个控件中的选择动态填充。选择"示例A"时，相应的单词应显示为第二个下拉框中的选项。我该怎么做？我尝试了一些东西，但列表只是水平显示，我需要它垂直显示。

var teams = [
    "Bambus Baumwolle Bettkasten",
    " Baumwolle Bettkasten",
    "Bambus Baumwolle Bettkasten",
    " Baumwolle Bettkasten",
    "Bambus Baumwolle Bettkasten"],
    
    listTeam = function listTeam(sel) {
        var val = document.getElementById('standings').value, //get the selected value
            team = teams[val], //get the selected team, based on value
            opt = document.createElement('option'), //create an <option> element
            lb = document.getElementById('leaderBoard'), //get the leaderBoard select element
            children = lb.children.length,
            child = null,
            i = 0; //incrementor
        opt.innerText = team;
        for (i = 0; i < children; i += 1) {
            
            child = lb.children[0];
            lb.removeChild(child);
        }
        lb.appendChild(opt);
    };
listTeam();
<select id='standings' name='standings' onchange="listTeam(this)">
  <option value='0'>A</option>
  <option value='1'>B</option>
  <option value='2'>C</option>
  <option value='3'>D</option>
  <option value='4'>E</option>
</select>
<select id='leaderBoard' name='leaderBoard' multiple="multiple" size="1" style="width: 100px;"></select>

<select>元素中的每个值都是一个单独的<option>元素。使用JavaScript字符串split方法将名称字符串拆分为各个元素，然后为每个元素创建一个option元素并将其放入列表中。

相关代码在这里，下面是完整的可运行示例。

var people = team.split(/'s/);
for (var j=0; j<people.length; j++) {
    var opt = document.createElement('option')
    opt.innerText = people[j];
    lb.appendChild(opt);
}

此外，请注意，清除排行榜就像一样简单

lb.options.length = 0;

完整示例：

var teams = [
    "Bambus Baumwolle Bettkasten",
    " Baumwolle Bettkasten",
    "Bambus Baumwolle Bettkasten",
    " Baumwolle Bettkasten",
    "Bambus Baumwolle Bettkasten"],
    
    listTeam = function listTeam(sel) {
        var val = document.getElementById('standings').value, //get the selected value
            team = teams[val], //get the selected team, based on value
            lb = document.getElementById('leaderBoard'); //get the leaderBoard select element
        lb.options.length = 0;
        var people = team.trim().split(/'s/);
        for (var j=0; j<people.length; j++) {
            var opt = document.createElement('option')
            opt.innerText = people[j];
            lb.appendChild(opt);
        }
    };
listTeam();
<select id='standings' name='standings' onchange="listTeam(this)">
  <option value='0'>A</option>
  <option value='1'>B</option>
  <option value='2'>C</option>
  <option value='3'>D</option>
  <option value='4'>E</option>
</select>
<select id='leaderBoard' name='leaderBoard' multiple="multiple" size="1" style="width: 100px;"></select>

var teams = [
    "Bambus Baumwolle Bettkasten",
    " Baumwolle Bettkasten",
    "Bambus Baumwolle Bettkasten",
    " Baumwolle Bettkasten",
    "Bambus Baumwolle Bettkasten"
],
listTeam = function (sel) {
    var val = sel?sel.value:0, //get the selected value
     team = teams[val],  //get the selected team, based on value
     lb = document.getElementById('leaderBoard'); //get the leaderBoard select
     lb.options.length = 0;
     optvals = team.split(" ");
    for(i=0;i<optvals.length;i++) {
        opt = document.createElement('option'); //create an <option> element
        opt.text = optvals[i];
        opt.value = i;
        lb.add(opt);
        }
};
listTeam();
相关文章：