Question

我想在html的两个不同的下拉列表中显示json的两个不同的值，但是它没有显示。我目前正在使用以下代码：如何在一个下拉列表中分隔名称和在js中的另一个下拉列表中分隔年龄。这是我的json数据：

{ “行动”：[

{ “名称”： “ANKIT”， “年龄”： “23”}， { “名称”： “Ankit2”， “年龄”： “23”}

}

$(document).ready( function(){

$.getJSON("jsondata.json",function(data){
$.each(data.action,function(){
$("select").append("<option>Name: "+this['name']+"</option><option>Age: "+this['age']+"</option><br/>");
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>
</title>
</head>
<body>
<select>
</select>
<select>
</select>
<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="script/myscript.js"></script>
</body>
</html>

Answer 1

添加了id属性，两者都选择了能够轻松选择jQuery。我还将您的示例json数据添加到http://jsbin.com/pegabe/1.json。

$.each(data.action, function() {
  nameDropdown.append($("<option></option>")
               .text('Name:' + this['name']));

  ageDropdown.append($("<option></option>")
               .text('Age:' + this['age']));
});

nameDropdown是对<select id="name"></select>
的引用
$('<option></option>') - 创建<option></option>

.text（'Name：'+ this ['name']） - 将文字附加到选项<option>Name: + this['name']</option>

最后将此选项附加到nameDropdown。

希望这有帮助。

$(document).ready(function() {

  $.getJSON("http://jsbin.com/pegabe/1.json", function(data) {
    var nameDropdown = $("#name"); // dropdown for name
    var ageDropdown = $("#age"); // dropdown for age

    $.each(data.action, function() {
      nameDropdown.append($("<option></option>")
                   .text('Name:' + this['name']));
      
      ageDropdown.append($("<option></option>")
                   .text('Age:' + this['age']));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <title>
  </title>
</head>

<body>
  <select id="name">
  </select>
  <select id="age">
  </select>
  <script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="script/myscript.js"></script>
</body>

</html>

Answer 2

稍微更改您的HTML，将ID添加到select元素

<select id="name">
</select>
<select id="age">
</select>

脚本

$.getJSON("jsondata.json", function(data) {
    $.each(data.action, function(index, elem) {
        //Append option to name
        $("#name").append($("<option />", {
            value: elem.name,
            text: "Name: " + elem.name
        }));

        //Append age
        $("#age").append($("<option />", {
            value: elem.age,
            text: "Age: " + elem.age
        }));
    });
});

注意：也只使用单个版本的jQuery。

在html中需要两个下拉列表来显示不同的json值

2 个答案: