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

Need a two dropdown in html to show different json values

本文关键字：显示 下拉列表 两个 json html      更新时间：2023-09-26

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

{"动作"：[

{"name"："Ankit"，"age"："23"}，{"name"："Ankit2"，"age"："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>

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>

稍微更改你的 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。

相关文章：