Jquery 如何提取键的值；标题文字；从JSON到结果div

给定我的JSON文件，当用户从JSON提供的下拉菜单中选择给定选项时，我希望在results div中显示headerText的值：

HTML

jQuery

$('#fetch').click(function() {
$.post('/echo/json/', {json: JSON.stringify(json)}, function(data) {
    $.each(data.dropdown, function(i, v) {
        $('#dropdown').append('<option value="' + v.color + '">' + v.optionText + '</option>');
    });
});
});
//change color of header container based on dropdown selection
$("#dropdown").change(function() {
$("#result").css("background-color", $(this).val());
}).change();

---

因为您使用的是jQuery，所以可能需要使用。它允许您在DOM元素旁边存储任意对象

修改的jQuery（请参见此处）

$（'#fetch'）。单击（函数（）{
$.post（'/echo/json/'，{json:json.stringify（json）}，函数（数据）{
var dropdown=$（“#dropdown”）；
$.each（数据下拉列表、函数（i、v）{
var option=$（''+v.optionText+''）；
option.data（'header'，v.headerText）.appendTo（下拉菜单）；
});
});
});
//根据下拉选择更改标题容器的颜色
$（“#下拉列表”）.change（函数（）{
$（“#结果”）.css（“背景色”，$（this.val（））.text（$（this.find（$（选项：selected））.data（$（标题））；
}).change（）；

也许您必须附加jquery元素？而不是：

$（'#下拉列表'）.append（''+v.optionText+''）尝试
$（'#下拉列表'）。追加（$（''+v.optionText+''）
这不允许我根据从下拉列表中选择的选项将headerText从JSON拉入结果div。使用
.text（$（This）.data（'header'））
不会给我headerText它是
$（This）.data（'header'）
，应该在
.text（）时返回头文本
设置div的文本节点值。是否包含存储标题文本的ajax回调的重新实现？调用
data（'header'）
是否没有返回存储的值？我的错误：在
change（）
回调中，
此
是对select的引用，而不是选项。因此，您应该使用
$（this）.find（'option:selected'）.data（'header'）
来获取所选选项的标题文本。我会编辑我的帖子。
var json = {
"dropdown": [
{
    "optionText": "Budget Starter",
    "headerText": "Work 1-on-1 with your expert to build new spending habits (and break some old ones). Get on a real, sustainable budget that fits your lifestyle.",
    "color": "#59c5c7"
},
{
    "optionText": "5 Year Planner",
    "headerText": "Declare what you want - freedom from debt, security for your family, or an amazing trip. Your expert will build you a custom plan to help you get there.",
    "color": "#009cd0"
},
{
   "optionText": "Portfolio Builder",
    "headerText": "Start training for the world's hardest game: investing. Your expert will help you grow into a disciplined and balanced portfolio manager.",
    "color": "#39ad74"
}
]
};

$('#fetch').click(function() {
$.post('/echo/json/', {json: JSON.stringify(json)}, function(data) {
    $.each(data.dropdown, function(i, v) {
        $('#dropdown').append('<option value="' + v.color + '">' + v.optionText + '</option>');
    });
});
});
//change color of header container based on dropdown selection
$("#dropdown").change(function() {
$("#result").css("background-color", $(this).val());
}).change();

#result{height: 50px;}

$('#fetch').click(function() {
$.post('/echo/json/', {json: JSON.stringify(json)}, function(data) {
    var dropdown = $('#dropdown');
    $.each(data.dropdown, function(i, v) {
        var option = $('<option value="' + v.color + '">' + v.optionText + '</option>');
        option.data('header', v.headerText).appendTo(dropdown);
    });
});
});
//change color of header container based on dropdown selection
$("#dropdown").change(function() {
$("#result").css("background-color", $(this).val()).text($(this).find('option:selected').data('header'));
}).change();