jquery element duplication in list box

Question

I have 5 list boxes with the same name. If i choose the same element in the list box it returns the error message as this value already selected. How to implement this in javascript Or in jquery

                <table width="50%" border="0">
            <tr>
            <td><select id="prev" name="prev[0][]" >
            <option value="test">test</option>
            <option value="test1">test</option>
            <option value="test2">test</option>
            <option value="test3">test</option>
            <option value="test4">test</option>

            </select>
            </td>
            </tr>
            <tr>
            <td><select id="prev" name="prev[0][]" >
            <option value="test">test</option>
            <option value="test1">test</option>
            <option value="test2">test</option>
            <option value="test3">test</option>
            <option value="test4">test</option>

            </select>
            </td>
            </tr>
            <tr>
            <td><select id="prev" name="prev[0][]" >
            <option value="test">test</option>
            <option value="test1">test</option>
            <option value="test2">test</option>
            <option value="test3">test</option>
            <option value="test4">test</option>

            </select>
            </td>
            </tr>
            <tr>
            <td><select id="prev" name="prev[0][]" >
            <option value="test">test</option>
            <option value="test1">test</option>
            <option value="test2">test</option>
            <option value="test3">test</option>
            <option value="test4">test</option>

            </select>
            </td>
            </tr>
            <tr>
            <td><select id="prev" name="prev[0][]" >
            <option value="test">test</option>
            <option value="test1">test</option>
            <option value="test2">test</option>
            <option value="test3">test</option>
            <option value="test4">test</option>

            </select>
            </td>
            </tr>
            </table>

The Query Function i used to check the listbox is selected or not is :

$("select[name^='prev["+k+"']").each(function( i ) {
        lsval = this.value;

        if(lsval == '') {
                alert("enter value");
                $("select[name^='prev["+k+"']").eq(i).focus();
                return false;
        }

    });

I have the options as (test,test1,test2,test3,test4) If i choose the same value in more than 1 list box then it returns the alert message as ('This value already selected').

How to implement this. please do the needful. Thanks

Answer 1

Hope this can help you but personally i believe alert on every selection is quite annoying HTML PART

             <table width="50%" border="0">
        <tr>
        <td><select class="prev" name="prev[0][]" >
        <option value="test">test</option>
        <option value="test1">test 1</option>
        <option value="test2">test 2</option>
        <option value="test3">test 3</option>
        <option value="test4">test 4</option>

        </select>
        </td>
        </tr>
        <tr>
        <td><select class="prev" name="prev[0][]" >
        <option value="test">test</option>
        <option value="test1">test 1</option>
        <option value="test2">test 2</option>
        <option value="test3">test 3</option>
        <option value="test4">test 4</option>

        </select>
        </td>
        </tr>
        <tr>
        <td><select class="prev" name="prev[0][]" >
        <option value="test">test</option>
        <option value="test1">test 1</option>
        <option value="test2">test 2</option>
        <option value="test3">test 3</option>
        <option value="test4">test 4</option>

        </select>
        </td>
        </tr>
        <tr>
        <td><select class="prev" name="prev[0][]" >
        <option value="test">test</option>
        <option value="test1">test 1</option>
        <option value="test2">test 2</option>
        <option value="test3">test 3</option>
        <option value="test4">test 4</option>

        </select>
        </td>
        </tr>
        <tr>
        <td><select class="prev" name="prev[0][]" >
        <option value="test">test</option>
        <option value="test1">test 1</option>
        <option value="test2">test 2</option>
        <option value="test3">test 3</option>
        <option value="test4">test 4</option>

        </select>
        </td>
        </tr>
        </table>

JQUERY PART

        $(function(){
        var PrevArray = [];
        $('.prev').live("click",function(){
            var selected = $(this).val();

            if($.inArray(selected,PrevArray) !== -1)
            {
                alert('Already Selected');
            }
            else
            {
                PrevArray.push(selected);
                console.log(PrevArray);
            }
        });
    });

Answer 2

also you should use select class="" instead of the id tag, because the id tag is only for 1 usage, and the class tag is for multiple uses

Answer 3

Names and IDs shouldn't be used more than once for HTML elements.

I'm not sure how you're storing the data collected by the forms, but you could to change your code to something like:

<select id="prev-1" name="prev-1" ></select>
<select id="prev-2" name="prev-2" ></select>
<select id="prev-3" name="prev-3" ></select>