根据从数组+ javascript中选择的第一个下拉列表，在第二个下拉框中显示信息

问题描述：

我是博爱网站的网络管理员，但不确定如何解决此问题.我想要两个下拉框.我希望如果用户单击Alpha(章节)，则第二个下拉框将显示选项1和选项2.但是，如果用户选择Beta(章节)，则第二个下拉框将显示选项3和选项4.纯粹在JavaScript中执行此操作.我将如何实现这一目标?

I am the webadmin for my fraternity's website but I am not sure how to tackle this problem. I want two drop down boxes in my form. I want that if the user clicks Alpha (chapter) the second drop down box will display Option 1 and Option 2. But if the user selects Beta (chapter) the second drop down box will display Option 3 and Option 4. I am trying to do this purely in JavaScript. How would I go about achieving this?

var chapter = new Array();
chapter[0] = ["Alpha","one","two","Option 1","three","four"];
chapter[1] = ["Alpha","one","two","Option 2","three","four"];
chapter[2] = ["Beta","one","two","Option 3","three","four"];
chapter[3] = ["Beta","one","two","Option 4","three","four"];
chapter[4] = ["Gamma","one","two","Option 5","three","four"];
chapter[5] = ["Gamma","one","two","Option 6","three","four"];
chapter[6] = ["Delta","one","two","Option 7","three","four"];
chapter[7] = ["Delta","one","two","Option 8","three","four"];
chapter[8] = ["Epsilon","one","two","Option 9","three","four"];
chapter[9] = ["Epsilon","one","two","Option 10","three","four"];

<select>
  <option value="">Choose one</option>
  <option value="Alpha">Alpha</option>
  <option value="Beta">Beta</option>
  <option value="Gamma">Gamma</option>
  <option value="Delta">Delta</option>
  <option value="Epsilon">Epsilon</option>
</select>

<select>
</select>

答

使用以下优化方法:

var chapter = [
 ["Alpha","one","two","Option 1","three","four"],
 ["Alpha","one","two","Option 2","three","four"],
 ["Beta","one","two","Option 3","three","four"],
 ["Beta","one","two","Option 4","three","four"],
 ["Gamma","one","two","Option 5","three","four"],
 ["Gamma","one","two","Option 6","three","four"],
 ["Delta","one","two","Option 7","three","four"],
 ["Delta","one","two","Option 8","three","four"],
 ["Epsilon","one","two","Option 9","three","four"],
 ["Epsilon","one","two","Option 10","three","four"]];

document.getElementById("main-box").addEventListener("change", function () {
    var selectbox = document.getElementById("dependant-box"),
	val = this.value;
	  
    selectbox.innerHTML = '';  
    chapter.forEach(function(c){
        if (c[0] === val){
	   opt = document.createElement('option');
	   opt.text = c[3];
	   selectbox.appendChild(opt);
	}
    });
});

<select id="main-box">
  <option value="">Choose one</option>
  <option value="Alpha">Alpha</option>
  <option value="Beta">Beta</option>
  <option value="Gamma">Gamma</option>
  <option value="Delta">Delta</option>
  <option value="Epsilon">Epsilon</option>
</select>

<select id="dependant-box">
</select>

根据从数组+ javascript中选择的第一个下拉列表，在第二个下拉框中显示信息

相关推荐