在下拉列表中获取重复值

时间:2016-04-08 07:02:14

标签: javascript jquery json ajax

我有一个从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>

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:2)

我想我知道为什么。你有这个代码:

            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,忘记objjsObject,除非它提供更多信息。

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