javascript动态创建选择框答案

【问题标题】：java script dyanamic created select boxjavascript动态创建选择框
【发布时间】：2017-03-01 18:01:16
【问题描述】：

我有两个下拉菜单。品牌和子品牌。两者都是动态生成的。基于品牌选择的价值，我必须填充品牌 2。但我是 java 脚本的新手。有人可以帮忙吗？在 Dropdown 1 选定的更改事件上，应触发一个函数，它应该填充下拉 2

<html>
<head>
<script>
var BRAND = ['HONDA', 'HERO']
var SUBBRANDHONDA = ['UNICORN','SHINE','ACTIVA']
var SUBBRANDHERO = ['SPLENDOR','PASSION']
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount;
var row = table.insertRow(rowCount);
 //*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.onchange=function(){
alert(element2.value);
 }
  //Append the options from the arraylist to the "select" element
for (var i = 0; i < BRAND.length; i++) {
var option = document.createElement("option");
option.value = BRAND[i];
option.text = BRAND[i];
element2.appendChild(option);
}
var cell3 = row.insertCell(2);
var element3 = document.createElement("select");

  //Append the options from the arraylist to the "select" element
for (var i = 0; i < SUBBRANDHONDA.length; i++) {
var option = document.createElement("option");
option.value = SUBBRANDHONDA[i];
option.text = SUBBRANDHONDA[i];
element3.appendChild(option);
  }
cell2.appendChild(element2);
cell3.appendChild(element3);
}
</script>
</head>
<body>
<TABLE border='1' id="dataTable">
<TR>
<td>
Sno
</td>
<td>
Brand
</td>
<td>
Sub Brand
</td>
</tr>
  </TABLE>
<button onclick="addRow('dataTable')">Add Task</button>
</body>

【问题讨论】：

stackoverflow.com/questions/42524122/… 可能重复
查看完全相同问题的答案：stackoverflow.com/questions/42524122/…

标签： javascript dom drop-down-menu element onchange

【解决方案1】：

var BRAND = ['HONDA', 'HERO']
var SUBBRANDHONDA = ['UNICORN','SHINE','ACTIVA']
var SUBBRANDHERO = ['SPLENDOR','PASSION']
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount;
var row = table.insertRow(rowCount);
 //*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
var cell3 = row.insertCell(2);
var element3 = document.createElement("select");
element2.onchange=function(){
var arr = this.value === 'HONDA' ? SUBBRANDHONDA : SUBBRANDHERO;
element3.innerHTML = '';
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("option");
option.value = arr[i];
option.text = arr[i];
element3.appendChild(option);
  }
 }
  //Append the options from the arraylist to the "select" element
for (var i = 0; i < BRAND.length; i++) {
var option = document.createElement("option");
option.value = BRAND[i];
option.text = BRAND[i];
element2.appendChild(option);
}

  //Append the options from the arraylist to the "select" element

cell2.appendChild(element2);
cell3.appendChild(element3);
}

<TABLE border='1' id="dataTable">
<TR>
<td>
Sno
</td>
<td>
Brand
</td>
<td>
Sub Brand
</td>
</tr>
  </TABLE>
<button onclick="addRow('dataTable')">Add Task</button>

【讨论】：

我需要的确切答案:)。非常感谢您的帮助
使用这种方法，我们在 Brand Drop Down 中只能有 2 个值？ – arun 1 小时前 var arr = this.value === 'HONDA' ? SUBBRANDHONDA : SUBBRANDHONDA;如果我有超过 10 个品牌，每个品牌都有子品牌怎么办？通过这种方法，我们可以检查是否“'HONDA' else SUBBRANDHONDA –
如果您想使用多个品牌，您可以使用 switch/case 或重新组织您的数据，例如 { 'HONDA': ['UNICORN','SHINE','ACTIVA'], 'HERO' : ['SPLENDOR','PASSION'], 'OTHER_BRAND': [....] } 并按键获取子品牌

【解决方案2】：

我认为通过稍微不同的数据结构来解决这个问题会更容易：

HTML

<select id="brand"></select>
<select id="subBrand"></select>

ES5 JS 语法

//a simple render function that inserts values into dropdowns
function renderSelect(select, data) {
  var html = [];
  data.forEach(function(value) {
    html.push("<option name=" + value + ">" + value + "</option>");
  });

  select.innerHTML = html.join("");
}

//initialized our logic
function initSelects() {
  //our data
  var brands = {
    HONDA: ['UNICORN', 'SHINE', 'ACTIVA'],
    HERO: ['SPLENDOR', 'PASSION']
  }

  // references to the our dropdowns (currently empty)
  var brandDropdown = document.getElementById("brand");
  var subBrandDropdown = document.getElementById("subBrand");

  //rendering the initial state
  renderSelect(brandDropdown, Object.keys(brands));
  renderSelect(subBrandDropdown, brands["HONDA"]);
  
  //binding the change event, so it will get updated, once selected.
  brandDropdown.addEventListener("change", function(e) {
    //getting the current selected index
    var selectedIndex = e.target.selectedIndex;
    //getting the value using the index
    var selectedValue = e.target.children[selectedIndex].getAttribute("name");
    renderSelect(subBrandDropdown, brands[selectedValue]);
  });

}

initSelects();

JSFiddle 演示：https://jsfiddle.net/9p916nob/

【讨论】：

使用这种方法，我们在 Brand Drop Down 中只能有 2 个值？
var arr = this.value === 'HONDA' ? SUBBRANDHONDA : SUBBRANDHONDA;如果我有超过 10 个品牌并且每个品牌都有其子品牌怎么办？通过这种方法，我们可以检查“'HONDA' else SUBBRANDHONDA
通过这种方法，您可以拥有无限量的数据，只需更新品牌下的值[]