Remove repeated entries in select option dropdown using Javascript | 2my4edge

24 June 2015

Remove repeated entries in select option dropdown using Javascript

Avoid duplicate entries in selection option dropdown using javascript, this is mostly used in php, while fetching multiple data in dropdown select, that time we need to avoid duplicate entries, that time we need this script, or else we have to use group by query, here we are using that without mysql query by using javascript. 

remove repeated duplicate entry in php javascript
DOWNLOAD                                     LIVE DEMO

We have avoid the repeated duplicate entries in php dropdown select, so that we are going to use script to avoid that. let see the clear code.

HTML CODE (  red highlighted is removed duplicate entries)
<div class="divone">
        <label>Duplicate entries removed : </label>
        <select class="form" name="sortfilter">
            <option value="All">Select Code</option>
            <option value="CSS">CSS</option>
            <option value="Mysql">Mysql</option>
            <option value="JQuery">JQuery</option>
            <option value="JQuery">JQuery</option>
            <option value="Javascript">Javascript</option>
            <option value="PHP">PHP</option>
            <option value="Javascript">Javascript</option>
            <option value="JQuery">JQuery</option>
            <option value="Javascript">Javascript</option>
            <option value="Mysql ">Mysql</option>
            <option value="Mysql ">Mysql</option>
            <option value="Mysql ">Mysql</option>
            <option value="Codeigniter">Codeigniter</option>
            <option value="Mysql">Mysql</option>
        </select>
    </div>

    <div class="divtwo">
        <label>Duplicate entries not removed : </label>
        <select class="form" name="nosortfilter">
            <option value="All">Select Code</option>
            <option value="CSS">CSS</option>
            <option value="Mysql">Mysql</option>
            <option value="JQuery">JQuery</option>
            <option value="JQuery">JQuery</option>
            <option value="Javascript">Javascript</option>
            <option value="PHP">PHP</option>
            <option value="Javascript">Javascript</option>
            <option value="JQuery">JQuery</option>
            <option value="Javascript">Javascript</option>
            <option value="Mysql ">Mysql</option>
            <option value="Mysql ">Mysql</option>
            <option value="Mysql ">Mysql</option>
            <option value="Codeigniter">Codeigniter</option>
            <option value="Mysql">Mysql</option>
        </select>
    </div>


SCRIPT
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var code = {};
$("select[name='sortfilter'] > option").each(function () {
    if(code[this.text]) {
        $(this).remove();
    } else {
        code[this.text] = this.value;
    }
});
</script>
in the script, the red high lighted is mentioned in the above html code, there one removed repeated duplicates and another one is non removed.





RELATED POSTS :
Change background on refresh using Java script
Alert style validation using Javascript
Disable right click and protect your content from coping using Java script
Enable right click by disable javascript in browser
Set current time using javascript for websites
Confirmation alert on before closing browser tab using Javascript
Basic of php and mysql ( insert coding )
Detect operating system and browser using Php
Marquee style in different manner with PHP and MySql


4 comments:

  1. Better use you DISTINCT in your sql query.
    example : SELECT DISTINCT column_name
    FROM table_name;

    ReplyDelete
  2. thank you very much sir...

    ReplyDelete
  3. awesome code, Really helpful.
    Thank you so much dear

    ReplyDelete

^