语义UI下拉菜单：当以编程方式更改选定选项时，阻止onchange事件触发

Question

当您在标准HTML中以编程方式更改下拉列表的选定值时，不会触发该事件。例如，如果我这样做：

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

下拉列表的onchange事件处理程序未执行（它只响应用户启动的事件）。

我正在将我的代码中的所有下拉列表转换为语义UI（这是一个很棒的库，BTW）。但问题是，无论更改是由用户交互还是由某些JS函数启动，onchange事件现在都会触发。

所以，当我这样做时：

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

onchange事件被触发。

这是表示两种行为的小提琴：

FIDDLE

所以，我的问题是：

• 是否有另一种方法（除了“设置选择”之外）选择下拉列表中不会触发onchange事件的其中一个选项？
• 如果没有，有没有办法阻止事件发生？

谢谢！

Answer 1

为了获得您想要的行为，您需要欺骗系统，使其认为您已经选择了您希望选择的选项。

$(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/[email protected]/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函数，系统认为您已经选择了您正在设置的值，因此更改事件不会触发。

Answer 2

为了避免这个问题，我将它分为两​​部分：

setValue行为的一部分：

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

以及setText行为的一部分：

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

这样既可以更新文本又可以更新价值。