值一次又一次地追加

Question

我有一个下拉列表，它从json获取值，因为我点击该下拉列表中的一个值，对应于该值的第二个下拉值，但是当我向下滚动时，我看到值再次反复添加。 。不知道这个重复来自哪里......会感谢你的帮助!!

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

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





            $.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(usedNames, 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');
                            $('<option>', {
                                text: value['attr004'],
                                value: 'attr004'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr005'],
                                value: 'attr005'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr006'],
                                value: 'attr006'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr007'],
                                value: 'attr007'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr007'],
                                value: 'attr007'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr008'],
                                value: 'attr008'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr009'],
                                value: 'attr009'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr010'],
                                value: 'attr010'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr011'],
                                value: 'attr011'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr012'],
                                value: 'attr012'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr013'],
                                value: 'attr013'
                            }).appendTo('#listbox');
                            $('<option>', {
                                text: value['attr014'],
                                value: 'attr014'
                            }).appendTo('#listbox');

                        }
                    });
                });
            });
        }
    });
});