从数组项Javascript填充下拉列表

Question

我有一系列这样的信息：

var myArray = ["Month,Expenditure,Income,Year", "January,187458,297664,1", "February,104967,274354,1", "March,202394,343509,1", "April,187532,94652,1", "May,138745,206456,1", "June,234857,143657,1", "July,193453,203433,1", "August,96343,45064,1", "September,371298,505635,1", "October,63756,85635,1", "November,45363,14355,1", "December,98642,173125,1"];

我正在尝试创建2个下拉列表，这些下拉列表填充有数组第一行中的项目：

<!DOCTYPE html!>

<html>
<body>

  <div id="myModalTemplate" class="modal">
   <p>X-Axis Data</p>
    <p><select name="xaxis"></select></p>
    <p>Y-Axis Data</p>
    <p><select name="yaxis"></select></p>
    <p>Create A Title for Your Chart</p>
  <p><button>Generate Chart</button</p>
 </div>

</body>
</html>html>

除了为每个项目编写选项之外，该项目可以有所不同，而我需要一种方法来读取数组中的第一行，然后拉出这些项目并在两个下拉列表中都显示它们

Answer 1

只需遍历数组，如下所示：

 var myArray = ["Month,Expenditure,Income,Year", "January,187458,297664,1", "February,104967,274354,1", "March,202394,343509,1", "April,187532,94652,1", "May,138745,206456,1", "June,234857,143657,1", "July,193453,203433,1", "August,96343,45064,1", "September,371298,505635,1", "October,63756,85635,1", "November,45363,14355,1", "December,98642,173125,1"]; const select = document.querySelector('select[name=xaxis]'); myArray.forEach(item => { select.appendChild(document.createElement('option')).textContent = item.split(',')[0]; });

 <div id="myModalTemplate" class="modal"> <p>X-Axis Data</p> <p><select name="xaxis"></select></p> <p>Y-Axis Data</p> <p><select name="yaxis"></select></p> <p>Create A Title for Your Chart</p> <p><button>Generate Chart</button</p> </div>

Answer 2

这将拆分选项字符串，并将轴选项添加到适当的选择框中

 var myArray = ["Month,Expenditure,Income,Year", "January,187458,297664,1", "February,104967,274354,1", "March,202394,343509,1", "April,187532,94652,1", "May,138745,206456,1", "June,234857,143657,1", "July,193453,203433,1", "August,96343,45064,1", "September,371298,505635,1", "October,63756,85635,1", "November,45363,14355,1", "December,98642,173125,1"]; window.onload = function(){ for(var i = 1; i<myArray.length; i++){ var info = myArray[i]; var infoArr = info.split(','); var xaxis = document.querySelector('[name=xaxis]'); var xoption = document.createElement('option'); xoption.setAttribute("name", infoArr[1]); xoption.text = info; xaxis.appendChild(xoption); var yaxis = document.querySelector('[name=yaxis]'); var yoption = document.createElement('option'); yoption.setAttribute("name", infoArr[2]); yoption.text = info; yaxis.appendChild(yoption); } }

 <div id="myModalTemplate" class="modal"> <p>X-Axis Data</p> <p><select name="xaxis"></select></p> <p>Y-Axis Data</p> <p><select name="yaxis"></select></p> <p>Create A Title for Your Chart</p> <p><button>Generate Chart</button</p> </div>

Answer 3

这看起来像是可行的。 从Y轴列表中删除X轴选择的项目会更加复杂，反之亦然。 但是可以做到的。

 var myArray = ["Month,Expenditure,Income,Year", "January,187458,297664,1", "February,104967,274354,1", "March,202394,343509,1", "April,187532,94652,1", "May,138745,206456,1", "June,234857,143657,1", "July,193453,203433,1", "August,96343,45064,1", "September,371298,505635,1", "October,63756,85635,1", "November,45363,14355,1", "December,98642,173125,1"]; const select1 = document.querySelector('select[name=xaxis]'); const select2 = document.querySelector('select[name=yaxis]'); myArray[0].split(',').forEach(item => { select1.appendChild(document.createElement('option')).textContent = item; select2.appendChild(document.createElement('option')).textContent = item; });

 <div id="myModalTemplate" class="modal"> <p>X-Axis Data</p> <p><select name="xaxis"></select></p> <p>Y-Axis Data</p> <p><select name="yaxis"></select></p> <p>Create A Title for Your Chart</p> <p><button>Generate Chart</button></p> </div>

从数组项Javascript填充下拉列表

问题描述

3 个解决方案

解决方案1
2 2018-03-26 00:49:49

解决方案2
1 2018-03-26 01:12:25

解决方案3
1 已采纳 2018-03-26 01:26:36

从数组项Javascript填充下拉列表

问题描述

3 个解决方案

解决方案1 2 2018-03-26 00:49:49

解决方案2 1 2018-03-26 01:12:25

解决方案3 1 已采纳 2018-03-26 01:26:36

解决方案1
2 2018-03-26 00:49:49

解决方案2
1 2018-03-26 01:12:25

解决方案3
1 已采纳 2018-03-26 01:26:36