带optgroup的select使用jQuery获取选中元素返回undefined求助

你的问题出在children()方法的使用上——它只会查找直接子元素，而带optgroup的结构里，option是optgroup的子元素，不是select的直接子元素，所以$('#wlistid').children('option:selected')根本找不到目标元素，自然返回undefined。

给你两种简单的解决方式：

方式一：直接用select的val()方法（最简便） #

select元素本身的val()方法会直接返回选中option的value值，不管有没有optgroup嵌套，直接用这个就行：

$('select[name=wlistid]').on('change', function() {
    var listid = $(this).val(); // 用$(this)更高效，无需重新查询DOM
    alert('ID ' + listid);
});

方式二：用find()代替children() #

如果确实需要获取选中的option元素，可以用find()方法（它会查找所有后代元素）：

$('select[name=wlistid]').on('change', function() {
    var listid = $(this).find('option:selected').val();
    alert('ID ' + listid);
});

另外提醒下，你AJAX加载选项的代码有个小语法错误——{'ajaxcall':'getOptions')的括号不匹配，应该改成{'ajaxcall':'getOptions'}，避免后续加载出问题。

内容的提问来源于stack exchange，提问作者Mike