如何在HTML中将JSON对象显示为下拉菜单的选项，对所有对象使用通用的JavaScript函数

How to display JSON objects as options of a dropdown in HTML, using a common JavaScript funciton for all objects

本文关键字：对象 函数 JavaScript 选项 JSON 中将 显示 下拉菜单 HTML      更新时间：2023-09-26

我在一个JSON文件中有两组数据(ACodes和BCodes(，我想读取它们，并将其显示为HTML文件中两个不同下拉列表的选项。我想有一个通用的JavaScript函数，可以用来处理它(如下所示(，但我没有得到所需的输出。非常感谢您帮助我解决问题！

HTML

<script>
var select, option, arr, i;
function loadJSON(var x){
    if(x.match == "A"){
        array = JSON.parse(ACodes);
        select = document.getElementById('dd1');
        for (i = 0; i < array.length; i++) {
          option = document.createElement('option');
          option.text = array[i]["Code"];
          select.add(option);
        }
    }
    else if(x.match == "B"){
        array = JSON.parse(BCodes);
        select = document.getElementById('dd2');
        for (i = 0; i < array.length; i++) {
          option = document.createElement('option');
          option.text = array[i]["Curr"];
          select.add(option);
        }
    }

}
</script>
<body onload="loadJSON('A');laodJSON('B')">
    <select id="dd1"></select>
    <select id="dd2"></select>
</body>

JSON

ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
  1. 删除loadJSON(var x)处的var=>loadJSON(x)
  2. remove.match在x.match == "A"中，您似乎想将x与特定值进行比较，而不是将其测试为regexp，因此更改为x === "A"

  3. 车身加载时的laodJSON('B');是打字错误。

  4. 有一些可重用的代码，你可以吸引值依赖于x，并使代码更短。这个步骤不是必须要做的，因为它不会导致源代码无法工作。

<body onload="  loadJSON('A');loadJSON('B');">
<select id="dd1"></select>
<select id="dd2"></select>
<script>
var select, option, arr, i;
  var ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
  var BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
function loadJSON(x){
  var array, select, target;
  if (x === 'A') {
    array = JSON.parse(ACodes);
    select = document.getElementById('dd1');
    target  = 'Code';
  } else if (x === 'B') {
    array = JSON.parse(BCodes);
    select = document.getElementById('dd2');
    target  = 'Curr';
  }
  
   for (i = 0; i < array.length; i++) {
      option = document.createElement('option');
      option.text = array[i][target];
      select.add(option);   
  }
} 
</script>
  </body>

编辑：为了更动态地创建它，你可以让函数接受更多的params，这样你就可以对它有更多的控制。演示在jsfiddle上。

// Append options to exist select
function loadJSON(jsonObj, key, selectId) {
  var arr = JSON.parse(jsonObj);
  // Get by Id
  var select = document.querySelector('select#' + selectId);
  // Loop through array
  arr.forEach(function(item) {
    var option = document.createElement('option');
    option.text = item[key];
    select.add(option);
  });
}
// Append select with id to target.
function loadJSON2(jsonObj, key, selectId, appendTarget) {
  // Get the target to append
  appendTarget = appendTarget ? document.querySelector(appendTarget) : document.body;
  var arr = JSON.parse(jsonObj);
  // Create select and set id.
  var select = document.createElement('select');
  if (selectId != null) {
      select.id = selectId;
  }
  // Loop through array
  arr.forEach(function(item) {
    var option = document.createElement('option');
    option.text = item[key];
    select.add(option);
  });
  appendTarget.appendChild(select);
}

<script>
 var select, option, arr, i;
 var ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
 var BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
 function loadJSON(x){
    if(x == "A"){
    array = JSON.parse(ACodes);
    select = document.getElementById('dd1');
    for (i = 0; i < array.length; i++) {
      option = document.createElement('option');
      option.text = array[i]["Code"];
      select.add(option);
    }
}
else if(x == "B"){
    array = JSON.parse(BCodes);
    select = document.getElementById('dd2');
    for (i = 0; i < array.length; i++) {
      option = document.createElement('option');
      option.text = array[i]["Curr"];
      select.add(option);
    }
}

}
</script>
<body onload='loadJSON("A");loadJSON("B")'>
<select id="dd1"></select>
<select id="dd2"></select>
</body>

现在这个代码就可以工作了。

match((方法在字符串中搜索与正则表达式的匹配项。所以match((函数在这里不起作用。你必须使用相等运算符才能完成这项工作。

我希望，这将帮助你。

你已经在路上了，你只需要让它更动态：(

function loadOptions(json) {
    json = JSON.parse(json);
    var select = document.createElement('select'), option;
    for (var i = 0; i < json.length; i++) {
        for (var u in json[i]) {
            if (json[i].hasOwnProperty(u)) {
                option = document.createElement('option');
                option.text = json[i][u];
                select.add(option);
                break;
            }
         }
    }
    return select;
}

使用它：

document.body.appendChild(loadOptions(ACodes));
document.body.appendChild(loadOptions(BCodes));

FIDDLE

http://jsfiddle.net/owgt1v2w/

上面的答案会对你有所帮助，但我强烈建议你检查一些javascript的框架，这些框架可以帮助你应对这种情况。。我使用的是knockout.js(http://knockoutjs.com/)

看看文档，还有很多与stackoverflow相关的主题http://knockoutjs.com/documentation/options-binding.html

问候！

相关文章：