如何使用jquery删除下拉列表中的重复选项答案

【问题标题】：How to remove duplicate option in dropdown list using jquery如何使用jquery删除下拉列表中的重复选项
【发布时间】：2014-01-21 03:27:49
【问题描述】：

我正在尝试使用 jquery 删除下拉列表中的重复选项。搜索了相关的问题和答案，但仍然无法解决。希望你们能帮助我。谢谢！这是我的代码：

     $(document).ready(function() {
            $("#cat").change(function() {
                $.ajax({
                    type: "GET",
                    url: "getPositionTitle.php",
                    data: "s_department=" + $(this).find(":selected").val(),
                    cache: false,
                    success: function(msg){
                        $("#position_title").empty();
                        my_position_title_array = $.parseJSON(msg);
                        for (i = 0; i < my_position_title_array.length; i ++) {
                            $("#position_title").append('<option value="' + my_position_title_array[i].position_title + '">' 
                                + my_position_title_array[i].position_title + '</option>');
                        }
                        $("#position_title").trigger('change');
                    }
                });
                var usedNames = {};
                $("select[name='my_position_title_array'] > option").each(function () {
                    if(usedNames[this.text]) {
                        $(this).remove();
                    } else {
                        usedNames[this.text] = this.value;
                    }
                });
            });
            $("#cat").trigger('change');

        }); 



        // Post data to postPositionData.php when user changes form
        $("#position_title").change(function() {
            // Serialize form data
            var yourFormData = $(this).serialize();
            // POST
            $.ajax({
                type: "POST",
                url: "doOfferedJob.php",
                data: yourFormData
            });
        });

    </script>

    <tr>
                    <td><label for="applied_department">Department:</label></td>
                    <td>
                        <select id="cat" applied_position_title="category" name="applied_department">
                            <?php
                            $query = "SELECT id, department FROM department";
                            $result = mysqli_query($link, $query) or die(mysqli_error());
                            while ($row = mysqli_fetch_assoc($result)) {
                                echo "<option value ='" . $row['department'] . "'>" . $row['department'] . "</option>";
                            }
                            ?>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td><label for = "position_title">Position Title:</label></td>
                    <td>
                        <select id="position_title" name="position_title">
                            <option value="1"></option>
                        </select>
                    </td>
                </tr>

【问题讨论】：

创建JSFiddle 对我们有帮助
在 Sibbo 的回答中，这应该是过滤的服务器端（如果可以的话），而不是客户端。 Jquery 不是用于不良编码的清理工具
哪个是您要删除重复项的选择框？？
我要删除职位标题中的重复项。
与此问题无关的提示：请考虑更适当地确定范围 - 例如在它们使用的块中声明像 i、my_position_title_array 这样的变量。否则它们将是全球性的，这很糟糕。见this Crockford article

标签： javascript jquery html duplicates html-select

【解决方案1】：

虽然我同意 A. Wolff 的评论，即这应该在服务器端进行管理，但您仍然可以按如下方式调整您的 for 循环：

var positionTitles = [];
for (i = 0; i < my_position_title_array.length; i ++) {
    if( positionTitles.indexOf( my_position_title_array[i].position_title) === -1 ) {
        $("#position_title").append(/* ... */);
    } else {
        positionTitles.push( my_position_title_array[i].position_title );
    }
}

也就是说，仅当 ...position_title 是一个真正的字符串，而不是某个字符串对象。

【讨论】：