Question

我在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"}]';

Answer 1

在loadJSON(var x) =＆gt;处移除var loadJSON(x)
在x.match == "A"删除.match，您似乎想要将x与特定值进行比较，而不是将其作为正则表达式进行测试，因此请更改为x === "A"
laodJSON('B'); at body onload是错误的。
有一些可重复使用的代码，您可以吸引值取决于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>

编辑：要更加动态地创建它，您可以使该函数接受更多参数，以便您可以对其进行更多控制。演示在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);
}

Answer 2

你很顺利，你只需要让它变得更有活力：）

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/

Answer 3

<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（）函数在这里不起作用。你必须使用相等的运算符来完成这项工作。

我希望，这会对你有所帮助。

Answer 4

上面的答案对您有所帮助，但我强烈建议您查看一些可以帮助您处理这种情况的javascript框架..我正在使用的是knockout.js（http://knockoutjs.com/）

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

问候！

如何使用适用于所有对象的通用JavaScript函数将JSON对象显示为HTML下拉列表的选项

4 个答案: