根据第二个选择从数组写入文本框

时间:2016-11-18 21:41:01

标签: javascript arrays textbox

嘿所有我正在我的兄弟会网站上工作,我正在创建一个表单,一旦用户选择第一个项目(章节)它就会给你2个选项。但现在我希望它能够选择该行(基于第二个选项)并将其显示在文本框中。例如,如果我在下拉列表中选择Alpha,然后从第二个下拉列表中选择选项1,我希望它在行文本框中显示a1。有人认为他们可以帮助我吗?非常感谢soo。



window.onload = function() {
  var programs = new Array();
  programs[0] = ["Alpha", "a1", "two", "Option 1", "three", "four"];
  programs[1] = ["Alpha", "a2", "two", "Option 2", "three", "four"];
  programs[2] = ["Beta", "b1", "two", "Option 3", "three", "four"];
  programs[3] = ["Beta", "b2", "two", "Option 4", "three", "four"];
  programs[4] = ["Gamma", "c1", "two", "Option 5", "three", "four"];
  programs[5] = ["Gamma", "c2", "two", "Option 6", "three", "four"];
  programs[6] = ["Delta", "d1", "two", "Option 7", "three", "four"];
  programs[7] = ["Delta", "d2", "two", "Option 8", "three", "four"];
  programs[8] = ["Epsilon", "e1", "two", "Option 9", "three", "four"];
  programs[9] = ["Epsilon", "e2", "two", "Option 10", "three", "four"];

  var program = programs.reduce(function(prev, curr) {
    if (prev[curr[0]]) {
      prev[curr[0]].push(curr[3]);
    } else {
      prev[curr[0]] = [curr[3]];
    } 
    return prev;
  }, {});
  

  document.getElementById('programs').onchange = function() {
    var name = this.value;
    var dependentValues = program[name];
    document.getElementById('options').options.length = 0;
    document.getElementById('options').innerHTML = dependentValues.reduce(function(prev, curr) {
      prev += '<option value="' + curr + '">' + curr + '</option>';
      return prev;
    }, '');
  };
  
  

};
&#13;
<select id="chapters">
  <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="options">
</select>


<input name="line" />
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您需要格式化选项对象以获得更好的遍历。

这是你能做的。

&#13;
&#13;
sudo java -jar salesforce2hadoop-assembly-1.0.jar init -u myUsername -p myPassword -b **file://**/home/nfsuser/imports/salesforce -w /home/sanjay/Desktop/enterprise.wsdl -s /home/nfsuser/imports/salesforce/account Account
&#13;
var programs = new Array();
programs[0] = ["Alpha", "a1", "two", "Option 1", "three", "four"];
programs[1] = ["Alpha", "a2", "two", "Option 2", "three", "four"];
programs[2] = ["Beta", "b1", "two", "Option 3", "three", "four"];
programs[3] = ["Beta", "b2", "two", "Option 4", "three", "four"];
programs[4] = ["Gamma", "c1", "two", "Option 5", "three", "four"];
programs[5] = ["Gamma", "c2", "two", "Option 6", "three", "four"];
programs[6] = ["Delta", "d1", "two", "Option 7", "three", "four"];
programs[7] = ["Delta", "d2", "two", "Option 8", "three", "four"];
programs[8] = ["Epsilon", "e1", "two", "Option 9", "three", "four"];
programs[9] = ["Epsilon", "e2", "two", "Option 10", "three", "four"];


var programList = {};
programs.forEach((val) => {
  var key = val[0];
  val.shift();
  if (!programList[key]) {
    programList[key] = [];
  }
  programList[key].push(val);

});



document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#chapters").addEventListener("change", (event) => {

    let selectEle = document.querySelector("#chapters");
    let val = selectEle.options[selectEle.selectedIndex].value;

    var html = "<option value=''>Select</option>";
    programList[val].forEach((val, idx) => {
      html += `<option value="${val[0]}">${val[2]}</option>`;
    });

    document.querySelector("#line").value = "";
    document.querySelector("#options").innerHTML = html;
  });


  document.querySelector("#options").addEventListener("change", (event) => {

    let selectEle = document.querySelector("#options");
    let val = selectEle.options[selectEle.selectedIndex].value;
    document.querySelector("#line").value = val;
  });

});
&#13;
&#13;
&#13;