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

Question

I am getting values in dropdown form my json and I am trying when I click on one value from dropdown then list box shud get populated. for example, As below you can see my json file as now im getting values in 1st dropdown as obs, hid I want.. say if i click on obs in list box i want to get 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"
}]

My javascript file is like

   $(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');
            }
        });
    });
});

My html

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

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

Please suggest something.. Thank you..

Answer 1

Try this

$.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');
        }
    });
});

}

Here is Fiddle

Answer 2

Use Id and class too when you are creating HTML

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

Than make a selector based on click on class like

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

Now you will have the name of selected element in ele than parse your json to get all attribute value for than name and populate listbox by that data