javascript - 在下拉列表中获取重复的值

我正在从下拉列表中提取值，但是由于我的json文件具有一些重复的值，因此我只希望它们一次..在它能够过滤值之前，它工作正常，但是当我包含更多代码时，它开始了再次采用重复的值..请看看..谢谢
$(document).ready(function() {

变量usednames正在过滤值。

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





        $.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() {
                $('#checkbox').empty();

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

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

我的HTML档案

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

    <select id="dropdown1"></select>
     <!--  <select id="listbox"></select> -->
    <input type="checkbox">
    <br>

最佳答案

我想我明白为什么。您有以下代码：

            if (usedNames.indexOf(value.name) == -1) {
                $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                usedNames.push(value.name);
            }

哪个可行（或应该可行）就可以了。但是之后，您有了：

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

通过查看您的代码，看来jsObject等于obj。因此，在第一部分中，您实际上是在检查是否存在重复的值，并将它们放入名为usedNames的数组中。

但是不久之后，您将jsObject附加到#dropdown1，因此您再也不会使用数组usedNames，该数组应该只有唯一的值。

创建usedNames后，应使用它，并忽略obj或jsObject，除非它包含更多信息。

编辑：请注意，创建usedNames时，您还将附加到下拉列表中。因此，您要添加usedNames的内容，然后添加jsObject。