Javascript迭代JSON文件级别以填充下拉列表

我是JS新手，正在尝试从JSON文件传递值以填充下拉列表。我有一个JSON文件，如下所示：

var mydates = {
   "2018": {
       "January": ["week1","week2","week3","week4"],
       "February": ["week5","week6","week7"],
       "March": ["week8","week9","week11"]
   },
   "2019": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8","week10","week11"]
    },
    "2020": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8"]
    }
}

我想要一个第一个下拉列表，显示列出的年份，第二个下拉列表显示月份，最后一个下拉列表显示星期

我想出了以下方法，用id“selectedyear”填充下拉列表多年，效果很好：

years = []
for(var prop in mydates){
    console.log(prop)
    years.push(prop)}

var myyear = document.getElementById('selectedyear');
for(var i = 0; i < years.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = years[i];
    myyear.appendChild(opt);
}

years=[]
用于（mydates中的var prop）{
控制台日志（道具）
年。推（道具）}
var myyear=document.getElementById（'selectedyear'）；
对于（变量i=0；i

现在，我如何迭代JSON的第二级，以便id为“selectedmonth”的下拉列表的选项仅显示所选年份的月份，然后id为“selectedweek”的下拉列表的选项显示所选年份和月份对应的周

---

非常感谢你的帮助

以下代码初始化并侦听除周选择之外的任何选择的事件

change

const mydates = {
    "2018": {
        "January": ["week1", "week2", "week3", "week4"],
        "February": ["week5", "week6", "week7"],
        "March": ["week8", "week9", "week11"]
    },
    "2019": {
        "January": ["week1", "week2", "week3", "week4"],
        "February": ["week5", "week6", "week7"],
        "March": ["week8", "week10", "week11"]
    },
    "2020": {
        "January": ["week1", "week2", "week3", "week4"],
        "February": ["week5", "week6", "week7"],
        "March": ["week8"]
    }
}

const years = Object.keys(mydates); // years = ['2018', '2019', '2020']
const initalMonths = Object.keys(Object.values(mydates)[0]);
const initialWeeks = mydates[Object.keys(mydates)[0]][initalMonths[0]];

const $yearSelectionOBJ = document.getElementById('selecetedyear');
const $monthSelectionOBJ = document.getElementById('selecetedmonth');
const $weekSelectionOBJ = document.getElementById('selecetedweek');

for (year of years) {
    const $optOBJ = document.createElement('option');

    $optOBJ.innerHTML = year;
    $yearSelectionOBJ.appendChild($optOBJ);
}

for (month of initalMonths) {
    const $optOBJ = document.createElement('option');

    $optOBJ.innerHTML = month;
    $monthSelectionOBJ.appendChild($optOBJ);
}

for (week of initialWeeks) {
    const $optOBJ = document.createElement('option');

    $optOBJ.innerHTML = week;
    $weekSelectionOBJ.appendChild($optOBJ);
}

$yearSelectionOBJ.addEventListener('change', (event) => {
    $monthSelectionOBJ.innerHTML = '';
    $weekSelectionOBJ.innerHTML = '';

    for (month in mydates[event.target.value]) {
        const $optOBJ = document.createElement('option');

        $optOBJ.innerHTML = month;
        $monthSelectionOBJ.appendChild($optOBJ);
    }

    for (week of mydates[event.target.value][Object.keys(mydates[event.target.value])[0]]) {
        const $optOBJ = document.createElement('option');

        $optOBJ.innerHTML = week;
        $weekSelectionOBJ.appendChild($optOBJ);
    }
});

$monthSelectionOBJ.addEventListener('change', (event) => {
    $weekSelectionOBJ.innerHTML = '';

    for (week of mydates[$yearSelectionOBJ.value][$monthSelectionOBJ.value]) {
        const $optOBJ = document.createElement('option');

        $optOBJ.innerHTML = week;
        $weekSelectionOBJ.appendChild($optOBJ);
    }
});

---

您可以执行以下操作：

var mydates = {
   "2018": {
       "January": ["week1","week2","week3","week4"],
       "February": ["week5","week6","week7"],
       "March": ["week8","week9","week11"]
   },
   "2019": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8","week10","week11"]
    },
    "2020": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8"]
    }
}

var myyear = document.getElementById('selectedyear');
Object.keys(mydates).forEach(year => {
  
  var yearOpt = document.createElement('option');
  yearOpt.innerHTML = year;
  myyear.appendChild(yearOpt);
  
  let months = Object.keys(mydates[year]);
  var myMonth = document.getElementById('selectedmonth');
  months.forEach(month => {
    
    var monthOpt = document.createElement('option');
    monthOpt.innerHTML = month;
    myMonth.appendChild(monthOpt);
    var myWeek = document.getElementById('selectedweek');
    mydates[year][month].forEach(week => {
      let opt = document.createElement('option');
      opt.innerHTML = week;
      myweek.appendChild(opt);
    });
  })
})

---

基本思想是使用选择新值的onchange事件填充其他下拉列表的值。下面是一个例子

const mydates={
"2018": {
“一月”：[“第一周”、“第二周”、“第三周”、“第四周”]，
“二月”：[“第5周”、“第6周”、“第7周”]，
“三月”：[“第8周”、“第9周”、“第11周”]
},
"2019": {
“一月”：[“第一周”、“第二周”、“第三周”、“第四周”]，
“二月”：[“第5周”、“第6周”、“第7周”]，
“三月”：[“第8周”、“第10周”、“第11周”]
},
"2020": {
“一月”：[“第一周”、“第二周”、“第三周”、“第四周”]，
“二月”：[“第5周”、“第6周”、“第7周”]，
“三月”：[“第8周”]
}
};
const yearSelect=document.getElementById（“年”）；
for（以mydates表示年份）{
让opt=document.createElement（'option'）；
opt.innerHTML=年份；
yearSelect.appendChild（opt）；
}
const monthSelect=document.getElementById（“月”）；
const weekSelect=document.getElementById（“周”）；
//删除除持牌人之外的所有选项
功能清除选择（选择）{
select.querySelectorAll（“选项：非（.placeholder）”）.forEach（元素=>{
选择.removeChild（elem）；
});
}
功能年更改（年）{
monthSelect.querySelector（“option.placeholder”）.innerHTML=“选择一个月”；
clearSelect（monthSelect）；
//添加给定年份的选项
for（以mydates[年]中的月份为单位）{
让opt=document.createElement（'option'）；
opt.innerHTML=月份；
每月选择附加儿童（opt）；
}
monthSelect.value=''；//选择占位符
clearSelect（weekSelect）；
weekSelect.querySelector（“option.placeholder”）.innerHTML=“先选择一个月”；
weekSelect.value=''；//选择占位符
}
功能月更改（月）{
weekSelect.querySelector（“option.placeholder”）.innerHTML=“选择一周”；
clearSelect（周选择）
对于（mydates的常量周[yearSelect.value][month]）{
让opt=document.createElement（'option'）；
opt.innerHTML=周；
weekSelect.appendChild（opt）；
}
weekSelect.value=''；//选择占位符
}

选择一年
首先选择一年
先选择一个月

您想一次显示3个下拉列表元素还是一个动态下拉列表？一次显示3个下拉列表元素谢谢。当我使用您的代码片段时，它可以正常工作，但在我的html中没有显示任何内容。唯一的区别是我从Django中的静态文件调用json文件的方式。。。问题是否来自以下几行，因为根据您的代码，此处mydates不是常量？var mydates。获取（“{%static”dates.json“%}”）。然后（response=>response.json（））。然后（json=>mydates=json）。然后（（）=>console.log（mydates））；我可以在console.log中看到正确解析的json。。。但是在html上，按钮是空的。听起来解析很好。对于范围界定，mydates应该在全球范围内可用，因此这不是问题所在。您是否在js和html中转换了selects的ID？我使用了#年#月和#日期，而我相信您使用的是#selectedyear、#selectedmonth和#selecteddate。是的，我确实更改了ID以匹配您的ID。我现在得到以下错误：uncaughtreferenceerror:yearChanged未在HTMLSelectElement.onchange中定义