Question

I have this code.

HTML

<select id='item'>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

jQuery

$(document).ready(function(){
    $('#item').click(function(){
        var type = $(this).val();
        if (type == "item1")
        {
            alert ('item1');
        }
        else if (type == "item2")
        {
            alert ('item2');
        }
        else if (type == "item3")
        {
            alert ('item3');
        }
    });
});

But whenever I hit the select box, it fires the alert box and it is kinda nasty. An alertbox should be fired when a user actually click the selective item. When a user hit the the item1 menu then it should only fire the alertbox of the item1.

Answer 1

Please try change api man: http://jsfiddle.net/eqHCN/

that will suffice the need. http://api.jquery.com/change/

code

$(document).ready(function(){
    $('#item').change(function(){
        var type = $(this).val();
        if (type == "item1")
        {
            alert ('item1');
        }
        else if (type == "item2")
        {
            alert ('item2');
        }
        else if (type == "item3")
        {
            alert ('item3');
        }
    });
});​