在下拉列表中获取重复值答案

【问题标题】：Getting repeated values inside dropdown在下拉列表中获取重复值
【发布时间】：2016-07-29 08:33:42
【问题描述】：

我有一个从 json 获取值的下拉列表，但由于我的 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>

【问题讨论】：

标签： javascript jquery json ajax

【解决方案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，它应该只有唯一值。

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

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

【讨论】：

非常感谢..现在工作了...但是当我在我的下拉列表中的属性 1 之后我得到 SELECT YOUR OPTION 的水印之后，我的第二个值来了为什么这些水印出现在 SELECT YOUR OPTION
@siya 您在创建 usedNames 之后添加了这一行。因此，对于obj 的每个对象，您都附加了“选择您的选项”。您应该在 each 函数之前附加这一行。
是的，现在解决了..还有一件事为什么在我的第二个下拉列表中为什么我在滚动时一次又一次地获得值 3 次，然后又开始出现值
@siya 我不完全明白这个错误在哪里，但我认为它来自你上一个 each 函数。对于jsObject 中的每个项目，您将在#listbox 中附加所有jsObject。尝试删除这个each 函数，或者把它放在你的主要each 之外......类似的东西。
好的..感谢您的建议。但我想知道我使用了列表框，但我的第二个值出现在下拉列表中，因为我的页面中仅包含 1 个下拉列表

【解决方案2】：

您可以先填写唯一值列表，然后再将其分配给下拉列表。

function unique(arr) {
var u = {}, a = [];
for(var i = 0, l = arr.length; i < l; ++i){
    if(!u.hasOwnProperty(arr[i])) {
        a.push(arr[i]);
        u[arr[i]] = 1;
    }
}
return a;

}

Most elegant way to create a list of unique items in JavaScript

【讨论】：