堆栈内存溢出
  简体   繁体   English

Javascript 遍历 JSON 文件级别以填充下拉列表

[英]Javascript iterate through JSON file levels to populate dropdown list

 原文  2021-01-03 07:39:42  2   3    javascript/ json/ drop-down-menu

问题描述

I'mn new to JS and trying to pass values from a JSON file to populate dropdown lists.我是 JS 的新手，并试图从 JSON 文件中传递值来填充下拉列表。 I've got a JSON file that looks like this:我有一个看起来像这样的 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"]
    }
}

I want a first dropdown list to show the years listed, a second dropdown for the months and a last dropdown for the weeks.我想要一个第一个下拉列表来显示列出的年份，第二个下拉列表显示几个月，最后一个下拉列表显示几周。

I came up with the following to populate the dropdown for years with id "selectedyear", and it works just fine:我想出了以下内容，用 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);
}

Now how can I iterate through the second level of the JSON so that the options for the dropdown with id "selectedmonth" only shows the months for the year selected, and then for the dropdown with id "selectedweek" to show the weeks corresponding to the selected year and month??现在我如何遍历 JSON 的第二级，以便 id 为“selectedmonth”的下拉菜单的选项仅显示所选年份的月份，然后为 id 为“selectedweek”的下拉菜单显示与选择年月？？

Many thanks for your help!非常感谢您的帮助！

3 个解决方案

解决方案1
 1  2021-01-03 09:14:54

The basic idea is to use an onchange event from the selection of a new value to populate the values of the other dropdowns.基本思想是使用新值选择中的 onchange 事件来填充其他下拉列表的值。 Below is an example.下面是一个例子。 

 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 yearSelect = document.getElementById("year"); for (let year in mydates) { let opt = document.createElement('option'); opt.innerHTML = year; yearSelect.appendChild(opt); } const monthSelect = document.getElementById("month"); const weekSelect = document.getElementById("week"); // delete all options besides the placholder function clearSelect(select) { select.querySelectorAll("option:not(.placeholder)").forEach(elem => { select.removeChild(elem); }); } function yearChanged(year) { monthSelect.querySelector("option.placeholder").innerHTML = "Select a month"; clearSelect(monthSelect); // add options for the given year for (let month in mydates[year]) { let opt = document.createElement('option'); opt.innerHTML = month; monthSelect.appendChild(opt); } monthSelect.value = ''; // select the placeholder clearSelect(weekSelect); weekSelect.querySelector("option.placeholder").innerHTML = "Select a month first"; weekSelect.value = ''; // select the placeholder } function monthChanged(month) { weekSelect.querySelector("option.placeholder").innerHTML = "Select a week"; clearSelect(weekSelect) for (const week of mydates[yearSelect.value][month]) { let opt = document.createElement('option'); opt.innerHTML = week; weekSelect.appendChild(opt); } weekSelect.value = ''; // select the placeholder }
 <html> <head></head> <body> <select id="year" onchange="yearChanged(this.value)"> <option class="placeholder" value="" disabled selected>Select a year</option> </select> <select id="month" onchange="monthChanged(this.value)"> <option class="placeholder" value="" disabled selected>Select a year first</option> </select> <select id="week"> <option class="placeholder" value="" disabled selected>Select a month first</option> </select> </body> </html>

解决方案2
 0 已采纳  2021-01-03 08:30:28

The following code both initiallizes and listens for event change of any selection excluding the week selection.以下代码初始化并侦听除周选择之外的任何选择的事件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);
    }
});

解决方案3
 0  2021-01-03 08:34:55

You can do the following,您可以执行以下操作，

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 遍历 JSON 中的文件 Javascript - Iterate through JSON File in Javascript React JS-遍历外部JSON文件以填充表 - React JS - iterate through external JSON file to populate table 如何使用 Javascript 遍历 JSON 文件 - How to iterate through a JSON file with Javascript 使用Javascript遍历JSON - Iterate through a JSON with Javascript 将 JSON Object 从 python 发送到 javascript 以填充 - sending JSON Object from python to javascript to populate dropdown list 遍历javascript中的列表 - Iterate through list in javascript 如何使用 javascript 从外部 xml 文件填充下拉列表 - How to populate dropdown list from an external xml file using javascript 使用JavaScript / jQuery遍历JSON - Iterate through JSON with JavaScript/jQuery 遍历Javascript中的JSON响应 - Iterate through JSON Response in Javascript 如何遍历JavaScript中的列表 - How to iterate through a list in javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM