Question

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

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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/

java脚本dyanamic创建选择框

2 个答案:

HTML

ES5 JS语法