Javascript 从数组项填充下拉列表_Javascript_Html

Javascript 从数组项填充下拉列表

javascript html

Javascript 从数组项填充下拉列表,javascript,html,Javascript,Html,我有一系列这样的信息： 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,4

我有一系列这样的信息：

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

我正在尝试创建两个下拉列表，其中填充了数组第一行中的项目：

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


X轴数据

Y轴数据

为图表创建标题
生成图表

不是为每个项目编写选项，而是项目可以不同，而是我需要一种方法来读取数组中的第一行，然后拉出项目并将其显示在两个下拉列表中，只需在数组上循环，如下所示：

var myArray=[“月、支出、收入、年度”、“1月，187458297664,1”、“2月，104967274354,1”、“3月，202394343509,1”、“4月，18753294652,1”、“5月，138745206456,1”、“6月，234857143657,1”、“7月，193453203433,1”、“8月，9634345064,1”、“9月，3712985056335,1”、“10月，6375685635,1”、“11月，4536314355,1”，“98642173125,1年12月]；
const select=document.querySelector（'select[name=xaxis]'）；
myArray.forEach（项=>{
选择.appendChild（document.createElement（'option'））.textContent=item.split（'，'）[0]；
})；


X轴数据

Y轴数据

为图表创建标题
生成图表这将拆分选项字符串，并将轴选项添加到相应的选择框中

var myArray=[“月、支出、收入、年度”、“1月、187458297664,1”、“2月、104967274354,1”、“3月、2023943509,1”、“4月、18753294652,1”、“5月、138745206456,1”、“6月、234857143657,1”、“7月、193453203433,1”、“8月、9634345064,1”、“9月、3712985056335,1”、“10月、6375685635,1”、“11月、4536314355,1””12月，98642173125,1“]；
window.onload=函数（）{
对于（var i=1；i这看起来是可行的。从Y轴列表中删除X轴所选项目和/或从Y轴列表中删除X轴所选项目会更复杂。但这是可以做到的

var myArray=[“月、支出、收入、年度”、“1月、187458297664,1”、“2月、104967274354,1”、“3月、2023943509,1”、“4月、18753294652,1”、“5月、138745206456,1”、“6月、234857143657,1”、“7月、193453203433,1”、“8月、9634345064,1”、“9月、3712985056335,1”、“10月、6375685635,1”、“11月、4536314355,1””12月，98642173125,1“]；
const select1=document.querySelector（'select[name=xaxis]'）；
const select2=document.querySelector（'select[name=yaxis]'）；
myArray[0]。拆分（“，”）.forEach（项=>{
选择1.appendChild（document.createElement（'option'））.textContent=item；
选择2.appendChild（document.createElement（'option'））.textContent=item；
})；

X轴数据

Y轴数据

为图表创建标题
生成图表
目前还不清楚您正在尝试实现什么或您已经尝试了什么。您能否显示您的尝试和您希望创建的输出？例如，您是否希望看到两个下拉列表，每个下拉列表（在本例中）列出“月”、“支出”、“收入”和“年”？还是有更复杂的东西？这与我的想法很接近，但取而代之的是“月”、“支出”、“收入”、“年”仅限。有4个选项可供选择。您要求的方法是这样做-这是一般的方法。选择Select
元素，然后在数组上选择forEach
。如果要对多个Select
执行相同的操作，只需复制和粘贴即可。这很接近，但我只需要这些选项“月、收入、支出、年度"作为4个选项available@JoshGoldsmith：你想要X轴和Y轴的选项吗？@Josh抱歉，我不太明白。你的意思是你想要选项文本中的四个选项，例如187458297664,1年1月？是的，想法是用户选择哪一组应该是X，哪一组应该是yI。我仍然不是100%，但我已经更新了代码，所以没有选项文本显示四个值。X轴是支出吗？