Question

我需要帮助解析以下内容：

{
  "data": [
    {
      "Function": "Administration",
      "SubFunction": "Facilities,Maintnce,Bldg Svcs,Other,Secretary"
    },
    {
      "Function": "Communications",
      "SubFunction": "Internal Communications,Marketing Comm,Other"
    },
    {
      "Function": "Customer_Services",
      "SubFunction": "Customer Engineer,Dispatcher,NonQuota Acct Supp Mgr,Other,PreSales-Network,Process and Systems,Quota Acct Supp Mgr,Remote Support Services,Rework,Service Offer Development,Services Logistics,Services Planning,Technology Consultant"
    }
  ]
}

我的jQuery代码是：

                $select3.html('');
                $select4.html('');
                $.each(data.data, function(key, val){
                  $select3.append('<option id="' + val.Function + '">' + val.Function + '</option>');
                  $.each(this.SubFunction, function(){
                    $select4.append('<option id="' + val.SubFunction + '">' + val.SubFunction + '</option>');
                    })
                })

会发生什么：第一个选项框应填充＆＃34;功能＆＃34;第二个是＆＃34;子功能＆＃34;在＆＃34;功能＆＃34;选择。

发生了什么：第一个选项框会加载＆＃34;功能＆＃34;值正确，但第二个下拉列表包含所有＆＃34;子函数＆＃34;来自所有＆＃34;功能＆＃34;有多个实例。

请帮忙。

谢谢。

Answer 1

你需要一个改变处理程序。这应该做的工作：

$select3 = $('#select3');
$select4 = $('#select4');
$.each(data.data, function() {
    addOption($select3, this.Function);
});

$.each(data.data[0].SubFunction.split(','), function() {
    addOption($select4, this);
});

$select3.on('change', function() {
    $select4.html('');

    $.each(data.data, function() {
        if ($select3.val() === this.Function) {
            $.each(this.SubFunction.split(','), function() {
                addOption($select4, this);
            });
        }
    });
});

function addOption($target, value) {
    $target.append('<option id="' + value + '">' + value + '</option>');
}

http://jsfiddle.net/m88u76eL/

Answer 2

DEMO

以下是如何做到这一点。您可以使用data attribute在option的{{1}}元素中存储每个函数的选项，然后在选择每个选项时，读取数据属性中的值，解析并用于在运行中填充select3。

select4

Answer 3

你已经在循环数据对象为什么要多做$ .each？

                $select3.html('');
                $select4.html('');
                $.each(data.data, function(key, val){
                  $select3.append('<option id="' + val.Function + '">' + val.Function + '</option>');

                    $select4.append('<option id="' + val.SubFunction + '">' + val.SubFunction + '</option>');

                });

这只是找工作吗？没有经过测试只是一个快速的帖子来帮助

JSON多值

3 个答案: