How to remove duplicate option in dropdown list using jquery

Question

I'm trying to remove the duplicate option in my dropdown list using jquery. Having searching for relevant question and answer but still unable to solve it. Hope you guys can help me with it. Thanks! Here my code:

     $(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>

As in Sibbo's answer, this should be filtered server side (if you can), not client side. Jquery is not a clean up tool for bad coding — A. Wolff, Jan 03 '14 at 12:53
A hint that has nothing to do with this question: Do consider scoping more properly - e.g. declare vars like i, my_position_title_array in the block they're used. Otherwise they'll be global, which is bad. See [this Crockford article](http://yuiblog.com/blog/2006/06/01/global-domination/) — Lukx, Jan 03 '14 at 13:06

score 0 · Answer 1 · answered Jan 03 '14 at 13:03

Although I Agree with A. Wolff's comment, that this should be managed on the server side, you still could tweak your for-loop as follows:

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 );
    }
}

That is, only, if ...position_title is a real string, and not some string-ish object.

How to remove duplicate option in dropdown list using jquery

1 Answers1