从列表框中的json获取数据

时间:2016-04-11 08:38:59

标签: javascript jquery html json

我有一个下拉列表,当我从该下拉列表中选择一个项目时,会出现一个列表,该列表对应于该项目来自列表框中的json。但我不想拥有列表框,我希望有复选框,以便我可以选择多个项目。我试图将此列表框转换为复选框,但没有得到预期的结果,因为我不想硬编码数据..我从json获取..请帮忙! 我的html文件

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

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

我的js代码

$(document).ready(function() {

    $.ajax({
        url: "data.json",
        dataType: "json",
        success: function(obj) {
            var jsObject = obj;
            var usedNames = [];

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




            $.each(obj, function(key, value) {
                if (usedNames.indexOf(value.name) == -1) {
                    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                    usedNames.push(value.name);
                }
            $('#dropdown1').change(function() {
                    $('#listbox').empty();

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

                    var selection = $('#dropdown1 :selected').text();
                 //   var selection = $('#dropdown1 :selected').text();
                    $.each(jsObject, function(index, value) {
                        if (value['name'] == selection) {
                            var optionHtml = '';
                            for (var i = 1; i <= 20; i++) {
                                var attr = 'attr' + ('000' + i).substr(-3);
                                optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
                            }
                            $('#listbox').append(optionHtml); return false;
                        }
                    });
                });
            });
        }
    });
});

0 个答案:

没有答案