当您在标准 HTML 中以编程方式使用更改事件处理程序更改下拉列表的选定值时,不会触发该事件。例如,如果我这样做:
document.getElementById("my_select").value = "foo";
下拉列表的 onchange 事件处理程序不会执行(它只响应用户启动的事件)。
我正在将代码中的所有下拉菜单转换为语义 UI(顺便说一句,这是一个很棒的库)。但是,问题是现在无论更改是由用户交互还是某些 JS 函数发起,onchange 事件都会触发。
所以,当我这样做时:
$('#my_select').dropdown('set selected', 'foo');
onchange 事件被触发。
这是显示两种行为的 fiddle :
<强> FIDDLE
所以,我的问题是:
- 是否有另一种方法(除了“设置所选”之外)来选择下拉列表中不会触发 onchange 事件的选项?
- 如果没有,是否有办法阻止事件触发?
谢谢!
最佳答案
要获得您想要的行为,您需要欺骗系统,让它认为您已经选择了您希望选择的选项。
$(document).ready(function() {
$('.ui.dropdown').dropdown();
$('#change_button').click( function() {
//set the value to the value you want
$('#semantic_select')[0].value='3';
//now use the semantic ui function
$('#semantic_select').dropdown('set selected', '3');
});
});
<link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<select id="semantic_select" class="ui dropdown" onchange="alert('Semantic Changed')">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input id="change_button" type="button" value="Change" /><br /><br />
通过设置值,然后调用dropdown
函数,系统认为您已经选择了要设置的值,因此不会触发更改事件.
关于javascript - 语义 UI 下拉菜单 : prevent onchange event from firing when selected option is changed programmatically,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55905480/