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

这会拆分选项字符串并将axis选项添加到相应的选择框

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这看起来像是可行的。从Y轴列表中移除X轴选定项目和/或反之亦然会更复杂。但它可以做到。

＆＃13;

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

＆＃13;

package loopfusion;

＆＃13;

从数组项Javascript填充下拉列表

3 个答案: