Question

我希望能够从下拉框中选择选项列表，其中的“ Station”值取自json数组-“ smallData.json”（我能够执行并且正在运行），然后生成一个基于从下拉列表中选择的特定“站”选项的同一json数组的结果（当前不起作用）。我假设我可能需要调用一个函数，并使用onchange方法在数组中循环，但是我不确定该如何工作。

[ { “ ID”：1 “ Station”：“ Carmichael Rd。”， “地址”：“ 54 Myers Rd。”， “ Monthly_CStore_Sales”：“ 120,000”， “ Operator”：“ Michael Sears”， “ Top_SKU”：“热狗” }， { “ ID”：2 “站”：“白楼山”， “地址”：“ 564 Jackson Ave.”， “ Monthly_CStore_Sales”：“ 89000”， “ Operator”：“ Sarah Pikes”， “ Top_SKU”：“肉饼” }， { “ ID”：3， “ Station”：“ Oakesfield”， “地址”：“彼得森街42号”， “ Monthly_CStore_Sales”：“ 150000”， “运算符”：“ Yolanda Gray”， “ Top_SKU”：“鸡肉” } ]

<code> 

<select id="dmenu"></select>
<div id="optionT"></div>


<script>
let dropdown = document.getElementById('dmenu');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose Station';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = './smallData.json';

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
      option = document.createElement('option');
      option.text = data[i].Station;

      dropdown.add(option);

      var optionText = "";
      for (x in data){
          optionText += '<ul>' +

            '<li>Station: '+ data.Station[x] +'</li>' +

            document.getElementById('optionT').innerHTML = optionText;
      }

    } else {
    // Reached the server, but it returned an error

}
}
request.onerror = function() {
  console.error('An error occurred fetching the JSON from ' + url);
};

request.send();
</script>
</code>

示例：例如，如果我选择“ Station Carmichael Road”，则要显示与该“ Station”字段关联的所有键值对：

“ ID：1”， “地址”：“ 54 Myers Rd。”， “ Monthly_CStore_Sales”：“ 120,000”， “ Operator”：“ Michael Sears”， “ Top_SKU”：“热狗”

Answer 1

您希望在选择下拉选项时显示Station的数据。

在下拉元素上添加onchange事件。

<select id="dmenu" onchange="handleOnChange(this)"></select>

然后将您的列表呈现逻辑移动到handleOnChange()

function handleOnChange(selectedDropdown) {
    // Find array element by "Station" value
    var station = data.find(function(element) {
        return element.Station == selectedDropdown.value;
    });

    // If station exists
    if (station) {
        // Show station's key-value in list
        let optionText = '<ul>';

        Object.keys(station).forEach(function(key) {
            optionText += '<li>' + key +': ' + station[key] +  '</li>';
            document.getElementById('optionT').innerHTML = optionText;
        });

        optionText += '</ul>';
    }
}

完整代码

<script>
function handleOnChange(selectedDropdown) {
    // Find array element by "Station" value
    var station = data.find(function(element) {
        return element.Station == selectedDropdown.value;
    });

    // If station exists
    if (station) {
        // Show station's key-value in list
        let optionText = '<ul>';

        Object.keys(station).forEach(function(key) {
            optionText += '<li>' + key +': ' + station[key] +  '</li>';
            document.getElementById('optionT').innerHTML = optionText;
        });

        optionText += '</ul>';
    }
}

let dropdown = document.getElementById('dmenu');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose Station';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = './smallData.json';
let data;

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
    if (request.status === 200) {
        data = JSON.parse(request.responseText);
        let option;

        for (let i = 0; i < data.length; i++) {
            option = document.createElement('option');
            option.text = data[i].Station;

            dropdown.add(option);
        }
    }
    else {
        // Reached the server, but it returned an error
    }
}
request.onerror = function() {
console.error('An error occurred fetching the JSON from ' + url);
};

request.send();
</script>

要在选择下拉列表框后循环遍历json数组

1 个答案: