Question

This is a very tiny problem that I got. Following is my html select tag

<select id="category" name="category" style="opacity: 0; ">             
                <optgroup label="Default">  
                    <option value="Finance">Finance</option>
                    <option value="IT">IT</option>
                </optgroup>
                <optgroup label="User Created">             
                    <option value="Categoy">Categoy</option>
                    <option value="My Category">My Category</option>
                </optgroup>
      </select>

I have to show a button when the user select an option which is in the User Created label optgroup. Can anyone give me a suggestion how to do it with jquery

Thanks

Answer 1

Fiddle: http://jsfiddle.net/tariqulazam/27RLj/

HTML

<select id="category" name="category" style="opacity: 1; ">             
   <optgroup label="Default">  
         <option value="Finance">Finance</option>
         <option value="IT">IT</option>
   </optgroup>
   <optgroup label="User Created">             
         <option value="Categoy">Categoy</option>
         <option value="My Category">My Category</option>
   </optgroup>
</select>

<input type="button" value="button" id="btn"/>​

CODE

$(document).ready(function(){
    $("#btn").hide();


    $("#category").change(function(){
        var selected = $("option:selected", this);
        selected.parent()[0].label=="User Created"?$("#btn").show(): $("#btn").hide();     

    });

});​