如何获取 dom 修改后的 select 框的当前 selected 选项？

Question

我在我的脚本中使用了一个伪造的 select 框，这意味着原来的 select 框被隐藏了，出于样式目的，一个 ul 出现了。每当此列表的 selected 值更改时，原始 select 框也会更改。

有一个更改功能。该函数内有以下代码：

var el = $(e.currentTarget) ;
$('#my_select_box').children().removeAttr('selected');
$('#my_select_box  option[value="'+el.attr('data-value')+'"]').attr('selected','selected');

更改后我想在另一个函数中检索原始 select 框的新 selected 值。

但是正常的selector只得到原来的值，没有得到新的：

$('#my_select_box option:selected').val() //returns the wrong value

那么如何在我需要的函数中获取新值呢？

我试过这个功能：

$("#my_select_box").bind("DOMSubtreeModified", function() {
    console.log($(this).find('option:selected').val());    
});

它 returns 是正确的值，但不是我需要的地方。那么如何从 domtree live 中检索正确的 select 框值？

提前致谢！

Answer 1

而不是 .attr('selected','selected');，试试 .prop('selected', true );

如何获取 dom 修改后的 select 框的当前 selected 选项？

How to get the currently selected option of a dom modified select box?

javascript

jquery

dom

select