Removing duplicates from a select dropdown using javascript or jquery

Question

I have a select dropdown field that is being created dynamically from a database based on locations. Due to the way this is being created it results in the dropdown having duplicate locations listed.

<label for="club_feed_town">Location:</label>
<select id="locationList" name="club_feed_town">
    <option value="">All Locations</option>
    <option value="Andover">Andover</option>
    <option value="Andover">Andover</option>
    <option value="Bishops waltham">Bishops waltham</option>
    <option value="Blandford forum">Blandford forum</option>
    <option value="Boscombe">Boscombe</option>
    <option value="Bournemouth">Bournemouth</option>
    <option value="Bournemouth">Bournemouth</option>
    <option value="Etc">Etc</option>
</select>

Does anyone know if there is a way to use some code on the page which checks the dropdown for duplicates and removes any duplicates from the menu?

Thanks in advance,

Tom

Duplicates based on the option's value, it's innerHTML, or both? — neilsimp1
– neilsimp1, Commented Feb 4, 2016 at 17:56

charlietfl · Accepted Answer · 2016-02-05 12:19:05Z

6

Simple enough using jQuery and a temporary array to store values ( or text)

Following assumes values are repeated

var optionValues =[];
$('#selectID option').each(function(){
   if($.inArray(this.value, optionValues) >-1){
      $(this).remove()
   }else{
      optionValues.push(this.value);
   }
});

DEMO

edited Feb 5, 2016 at 12:19

answered Feb 4, 2016 at 18:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Perkins Over a year ago

Thanks for your suggestion but it doesn't seem to be working when I've added it as follows. Any ideas?

Tom Perkins Over a year ago

charlietfl Over a year ago

I had typo in selector ... remove s at end of options .the tag is <option>.. Demo: jsfiddle.net/k3up4j3j

Tobias Reich · Accepted Answer · 2019-04-02 08:52:17Z

6

A modern JS solution without jQuery:

const options = []

document.querySelectorAll('#locationList > option').forEach((option) => {
    if (options.includes(option.value)) option.remove()
    else options.push(option.value)
})

answered Apr 2, 2019 at 8:52

Tobias Reich

2,0443 gold badges21 silver badges29 bronze badges

1 Comment

Hard_Whey Over a year ago

thanks heaps, was having the same issue and have tried over half a dozen ways found from researching on here, none worked other than yours!

Qammar Feroz · Accepted Answer · 2016-02-04 18:05:44Z

3

if you can edit the query, Use DISTINCT keyword on your query to the db, so that it do not repeat the same location.

answered Feb 4, 2016 at 18:05

Qammar Feroz

7188 silver badges21 bronze badges

Comments

Niklesh Raut · Accepted Answer · 2016-02-04 18:04:46Z

1

I assumed you want something like this.

  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <select id="select_id">
        <option>abc</option>
        <option>abc</option>
        <option>bcd</option>
        <option>xyz</option>
        <option>bcd</option>
        <option>xyz</option>
    </select>
    <script type="text/javascript">
    var opt = {};
    $("#select_id > option").each(function () {
        if(opt[$(this).text()]) {
            $(this).remove();
        } else {
            opt[$(this).text()] = $(this).val();
        }
    });

    </script>

answered Feb 4, 2016 at 18:04

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

Gwendal · Accepted Answer · 2016-02-04 18:05:10Z

1

If order is not important, you can try this jQuery snippet

$("form select option").each(function(){
    var value = $(this).val();
    var elems = $("form option[value="+value+"]");
    if (elems.length > 1) {
        elems.remove();
        $("form select").append("<option value="+value+">"+value+"</option>");
    }
});

answered Feb 4, 2016 at 18:05

Gwendal

1,2737 silver badges17 bronze badges

Comments

Diego Fernando Villarroel Diaz · Accepted Answer · 2016-02-04 18:11:26Z

-3

Usually the problem is not in the client-side but in the database-side if the selection is not acurated doesnt really worth clean the selection.

Select DISTINCT(var) from X;

should work even better than a new "function" in JavaScript

answered Feb 4, 2016 at 18:11

Diego Fernando Villarroel Diaz

861 silver badge5 bronze badges

Collectives™ on Stack Overflow

Removing duplicates from a select dropdown using javascript or jquery

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related