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