Question

我从我的json下拉窗口获取值，当我点击下拉列表中的一个值然后列表框shud get填充时我正在尝试。例如，如下所示你可以看到我的json文件，因为我现在在第一个下拉列表中获取值为obs，我希望...如果我点击列表框中的obs我想得到brs1，crs1，drs1。

[{
  "name": "obs",
  "date": "1458834026000",
  "attr001": "brs1",
  "attr002": "crs1",
  "attr003": "drs1",
}, {
  "name": "hid",
  "date": "1458774000000",
  "attr001": "ffrs1",
  "attr002": "grrs1",
  "attr003": "mno1",
}, {
  "name": "qwe",
  "date": "1425744000000",
  "attr001": "klm1",
  "attr002": "wer1",
  "attr003": "iop1",
}, {
  "name": "rty",
  "date": "1458774000000",
  "attr001": "yrs1",
  "attr002": "qws1",
  "attr003": "prs1"
}]

我的javascript文件就像

   $(document).ready(function () {

    $.getJSON("data.json",function(obj) {
    var jsObject = $.parseJSON(obj);
        var usedNames = [];
        $.each(obj, function(key, value) {
            if (usedNames.indexOf(value.name) == -1) {
                $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                usedNames.push(value.name);
            }
    $('<option>', {
        text: 'Select your Option',
        value: '',
        selected: 'selected',
        disabled: 'disabled'
    }).appendTo('#dropdown1');

    $.each(jsObject, function (index, value) {
        $('<option>', {
            text: value['name'],
            value: index
        }).appendTo('#dropdown1');
    });

    $('<option>', {
        text: 'Select your List Option',
        value: '',
        selected: 'selected',
        disabled: 'disabled'
    }).appendTo('#listbox');


    $('#dropdown1').change(function () {
        $('#listbox').empty();

        $('<option>', {
            text: 'Select your List Option',
            value: '',
            selected: 'selected',
            disabled: 'disabled'
        }).appendTo('#listbox');

        var selection = $('#dropdown1 :selected').text();
        $.each(jsObject, function (index, value) {
            if (value['name'] === selection) {
                $('<option>', {
                    text: value['attr001'],
                    value: 'attr001'
                }).appendTo('#listbox');
                $('<option>', {
                    text: value['attr002'],
                    value: 'attr002'
                }).appendTo('#listbox');
                $('<option>', {
                    text: value['attr003'],
                    value: 'attr003'
                }).appendTo('#listbox');
            }
        });
    });
});

我的HTML

<form name="myform" id="myForm">

    <select id="dropdown1"></select>
    <select id="listbox"></select>
    <br>

请提出建议..谢谢..

Answer 1

试试这个

$.getJSON("data.json",function(obj) {

var json_string = '[{"name":"obs","date":"1458834026000","attr001":"brs1","attr002":"crs1","attr003":"drs1"},{"name":"hid","date":"1458774000000","attr001":"ffrs1","attr002":"grrs1","attr003":"mno1"},{"name":"qwe","date":"1425744000000","attr001":"klm1","attr002":"wer1","attr003":"iop1"},{"name":"rty","date":"1458774000000","attr001":"yrs1","attr002":"qws1","attr003":"prs1"}]';
var jsObject = $.parseJSON(json_string);
// var jsObject = $.parseJSON(obj);  // Assuming yout obj contains the JSON Stirng

$('<option>', {
    text: 'Select your Option',
    value: '',
    selected: 'selected',
    disabled: 'disabled'
}).appendTo('#dropdown1');

$.each(jsObject, function (index, value) {
    $('<option>', {
        text: value['name'],
        value: index
    }).appendTo('#dropdown1');
});

$('<option>', {
    text: 'Select your List Option',
    value: '',
    selected: 'selected',
    disabled: 'disabled'
}).appendTo('#listbox');


$('#dropdown1').change(function () {
    $('#listbox').empty();

    $('<option>', {
        text: 'Select your List Option',
        value: '',
        selected: 'selected',
        disabled: 'disabled'
    }).appendTo('#listbox');

    var selection = $('#dropdown1 :selected').text();
    $.each(jsObject, function (index, value) {
        if (value['name'] === selection) {
            $('<option>', {
                text: value['attr001'],
                value: 'attr001'
            }).appendTo('#listbox');
            $('<option>', {
                text: value['attr002'],
                value: 'attr002'
            }).appendTo('#listbox');
            $('<option>', {
                text: value['attr003'],
                value: 'attr003'
            }).appendTo('#listbox');
        }
    });
});

}

这是Fiddle

Answer 2

创建HTML时也使用Id和类

$("#dropdown1").append("<option id=" + value.name + " class="dropdown" value=" + key + ">" + value.name + "</option>");

根据点击类

制作一个选择器

$('.dropdown').on('change', function(){
    ele = $(this).attr('id');
})

现在，您将获得ele中所选元素的名称，而不是解析您的json以获取名称之外的所有属性值，并按该数据填充列表框

通过单击下拉列表中的特定值获取列表框中的相应值

2 个答案: