如何使用 jQuery 从 JSON 对象中选择值？

在本文中，我们将从 JSON 对象中选择值并使用 jQuery 在浏览器上显示它们。要从 JSON 对象中选择值到网页，我们使用 append() 方法。

jQuery 中的 append() 方法用于在所选元素的末尾插入一些内容。

句法：

$(selector).append( content, function(index, html) )

方法：首先我们在一个变量中存储一个包含 (key, value) 对的 JSON 对象。我们使用 元素创建了一个按钮，当我们单击该按钮时，jQuery函数将使用选择器和单击事件调用。单击按钮后，attr() 方法添加了带有 元素的 name 属性。 元素使用 append() 和 each() 方法附加到每个元素。

例子：

HTML

  

    
        How to select values from a
        JSON object using jQuery?
    
  
    
    
    
  
    
        $(document).ready(function () {
  
            var json = [
                { "name": "GFG", "text": "GFG" },
                { "name": "Geeks", "text": "Geeks" },
                { "name": "GeeksforGeeks", 
                    "text": "GeeksforGeeks" }
            ];
  
            $('button').click(function () {
                var select = $("<select></select>")
                    .attr("name", "cities");
  
                $.each(json, function (index, json) {
                    select.append($("<option></option>")
                    .attr("value", json.name).text(json.text));
                });
                $("#GFG").html(select);
            });
        });  
    

  

    
        GeeksforGeeks
    
  
    
        How to select values from a
        JSON object using jQuery?
    
  
    
  
    Submit

  

输出：

单击按钮之前：

点击按钮后：

Copyright © 2020 - 2024 版权所有
蜀ICP备20006366号-1
Made with ❤️ in Chengdu