Home
Javascript
Web Development

How To Remove Duplicate Dropdown Option From Select Using JavaScript

You Might Have Faced The Situation When There Are Identical & Duplicate Values Present In The Dropdown List. Now The Question Aries How To Remove Duplicate Values From Dropdown List In JavaScript

How To Remove Duplicate Option From Select Tag

Suppose We Have A Select Elements With Multiple Duplicate Value
<select id='mylist'>
<option value='php'>PHP</option>
<option value='css'>CSS</option>
<option value='php'>PHP</option>
<option value='sql'>SQL</option>
<option value='js'>JS</option>
<option value='css'>CSS</option>
<option value='js'>JS</option>
</select>
So The Above Code Has Multiple Duplicate Values In It. To Remove The Duplicate Values Using JavaScript , We Will Use JQuery
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
I Am Going To Create A Function Which Will Be Called On Button Click [ You Can Call It According To Your Choice Like onPageLoad ] & This Function Will Be Responsible For Removing Duplicate Option
<script>
function removeduplicate()
{
var mycode = {};
$("select[id='mylist'] > option").each(function () {
    if(mycode[this.text]) {
        $(this).remove();
    } else {
        mycode[this.text] = this.value;
    }
});
}
</script>
Here 'mylist' Is The id Of Select Tag. Now Call This Function & See The Result.

As We Can See In The Output , All The Multiple Duplicate Dropdown List Option Values Are Removed. In This Way You Can Remove Duplicate Entities From Dropdown List Of Select Element By Using JavaScript

Post a Comment