语义UI下拉菜单:以编程方式更改所选选项时,阻止触发onchange事件

时间:2019-04-29 14:28:32

标签: javascript jquery semantic-ui

在标准HTML中使用更改事件处理程序以编程方式更改下拉列表的选定值时,不会触发该事件。例如,如果我这样做:

document.getElementById("my_select").value = "foo";

下拉菜单的onchange事件处理程序未执行(它仅响应用户启动的事件)。

我正在将代码中的所有下拉列表转换为语义UI(这是一个很棒的库,顺便说一句)。但是,问题在于,无论更改是由用户交互还是由某些JS函数发起的,现在都将触发onchange事件。

所以,当我这样做时:

$('#my_select').dropdown('set selected', 'foo');

onchange事件被触发。

这是显示两种行为的小提琴:

FIDDLE

所以,我的问题是:

  • 是否有另一种方法(“设置选定的集合”除外)在下拉菜单中选择一个不会触发onchange事件的选项?
  • 如果没有,是否有办法防止事件触发?

谢谢!

2 个答案:

答案 0 :(得分:0)

要获得所需的行为,您需要诱使系统认为您已经选择了想要的选项。

$(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 />

通过设置值, then 调用dropdown函数,系统会认为您已经选择了要设置的值,因此更改事件不会触发。

答案 1 :(得分:0)

为避免此问题,我将其分为两部分:

setValue行为的一部分:

$('#semantic_select').dropdown('set value', 3)

还有setText行为的一部分:

$('#semantic_select').dropdown('set text', 'three')

这样可以同时更新文本和值。