How to remove duplicate option from Select dropdown using JQuery
<!DOCTYPE html> <html lang="en"> <head> <title>Codelizar - Remove duplicate options</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <h1>Method 1</h1> <select id="sel_box"> <option value="">All Equipment</option> <option value="1">Dumbells</option> <option value="2">Plates</option> <option value="3">Rodes</option> <option value="4">Benches</option> </select> <h1>Method 2</h1> <select id="sel_box_another"> <option value="">All Equipment</option> <option value="1">Dumbells</option> <option value="2">Plates</option> <option value="3">Rodes</option> <option value="4">Benches</option> </select> </body> <footer> <script type="text/javascript"> $(document).ready(function(){ /* js for method - 1 */ var map = {}; $('#sel_box').each(function () { if (map[this.value]) { $(this).remove() } map[this.value] = true; }); /* js for method - 2 */ $("#sel_box_another").val(function(idt, val) { $(this).siblings('[value="'+ val +'"]').remove(); }); }); </script> </footer> </html>