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

Answer 1

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

Answer 2

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