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/