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

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

• javascript
• jquery
• html

• Duplicates based on the option's value, it's innerHTML, or both? – neilsimp1 Commented Feb 4, 2016 at 17:56
• 1 Share some code at least. MVCE – Ibrahim Khan Commented Feb 4, 2016 at 17:57
• Sorry if this was unclear, code added to the question – Tom Perkins Commented Feb 5, 2016 at 12:13

6 Answers 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

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

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

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>

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

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