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

Question

我有一个下拉菜单，它从 json 中获取值，但由于我的 json 文件有一些重复的值，所以我只想要它们一次..在它工作正常之前，因为我能够过滤这些值，但是当我包含更多值时代码再次开始采用重复值..请看一下..谢谢.. $(文档).ready(函数() {

变量 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>

Answer 1

我想我明白为什么了。你有这个代码:

            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，它应该只具有独特的值(value)。

你应该在创建它之后使用usedNames，并且忘记obj或jsObject，除非它包含更多信息。

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