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方法返回所选option的值。但是，由于您的选项标记没有值属性，val会返回所选选项的text。

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

http://jsfiddle.net/DRDsS/

Answer 2

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

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

选中 DEMO

希望它会有所帮助。

Jquery从selectlist optgroup中获取选定的文本和值

2 个答案: