Question

我是博爱网站的webadmin，但我不知道如何解决这个问题。我想在我的表格中放两个下拉框。我希望如果用户单击Alpha（章节），第二个下拉框将显示选项1和选项2.但如果用户选择Beta（章节），则第二个下拉框将显示选项3和选项4.我正在尝试纯粹用JavaScript做这件事。我将如何实现这一目标？

＆＃13;

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"];

＆＃13;

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

＆＃13;

Answer 1

抱歉，我花了很多时间。因为我无法使用jquery。

＆＃13;

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"];

document.getElementById("sell").addEventListener("change", addActivityItem, false);

function addActivityItem(){
  var sel= document.getElementById("sel");
  sel.innerHTML = '';
  var brr=[];
var temp= document.getElementById("sell").value;
chapter.forEach(function(a){
        if(a[0]==temp)
         brr.push(a[3]);   
})  ;

 
  brr.forEach(function(b){
  var newOption = document.createElement('option');
   sel.appendChild(newOption);
   newOption.text=b;
  });

}

＆＃13;

<select id="sell">
  <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="sel">
</select>

＆＃13;

Answer 2

我会看看你是否可以重组数据以使自己更容易。

此处的第一部分代码将现有结构转换为对象，其中属性是章节的名称，值是可用选项列表。

/home/$(whoami)/.spring/engine/103.0/spring: error while loading shared libraries: libcurl.so.4: cannot open shared object file: No such file or directory

window.onload = function() {
  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"];

  var chapters = chapter.reduce(function(prev, curr) {
    if (prev[curr[0]]) {
      prev[curr[0]].push(curr[3]);
    } else {
      prev[curr[0]] = [curr[3]];
    }
    return prev;
  }, {});

  document.getElementById('chapter').onchange = function() {
    var name = this.value;
    var dependentValues = chapters[name];
    document.getElementById('options').options.length = 0;
    document.getElementById('options').innerHTML = dependentValues.reduce(function(prev, curr) {
      prev += '<option value="' + curr + '">' + curr + '</option>';
      return prev;
    }, '');
  };

};

其余代码是一个简单的事件处理程序，它通过根据选择章节名称获取属性来创建选项，并将它们添加到HTML中。

请注意，此处使用的innerHTML技巧不适用于旧版本的Internet Explorer。

Answer 3

使用以下优化方法：

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的选择，在第二个下拉框中显示信息

3 个答案: