Jquery get selected text and value from selectlist optgroup

Question

I need to get the selected text and value from the optGroup selectList below on the click of a button. So something like?

      $("#addButton").click(function () {

     var selected = ???
});          


  <select name="list">
    <optgroup label="mammals">
      <option>dog</option>
      <option>cat</option>
      <option>rabbit</option>
      <option>horse</option>
    </optgroup>
    <optgroup label="reptiles">
      <option>iguana</option>
      <option>snake</option>
    </optgroup>
  </select>

Answer 1

You can use Attribute Equals selector and val method.

$("#addButton").click(function() {
    // var selected = $('select[name="list"] :selected');
    var val = $('select[name="list"]').val();
});

val method return the value of selected option . However as your option tags have no value attributes, val returns the text of the selected option.

var value = $('select[name="list"] :selected').val();
var text  = $('select[name="list"] :selected').text();

http://jsfiddle.net/DRDsS/

Answer 2

Provide an id to your select like "list", and you can try this

$(function(){
   $("#addButton").click(function () {
       var select = $('select#list');
       var selectedItem= select.find(':selected');
       var selectedVal = select.val();
       var selectedText = selectedItem.text();
       var optgroupLabel = selectedItem.parent().prop('label');
       alert("val =" + selectedVal + " text ="+ selectedText+" group =" + optgroupLabel );
   });       
});

Check this DEMO

Hope it will help.