jquery - Jquery 从选择列表 optgroup 中获取选定的文本和值

Question

我需要通过单击按钮从下面的 optGroup selectList 中获取选定的文本和值。那么像什么？

      $("#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

您可以使用Attribute Equals选择器和val方法。

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

val方法返回 selected 的值option。但是，由于您的选项标签没有值属性，val因此返回text所选选项的。

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

http://jsfiddle.net/DRDsS/

Answer 2

为您的选择提供一个 ID，例如“列表”，您可以试试这个

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

检查此演示

希望它会有所帮助。