语义 UI 下拉菜单：防止在以编程方式更改所选选项时触发 onchange 事件答案

【问题标题】：Semantic UI dropdowns: prevent onchange event from firing when selected option is changed programmatically语义 UI 下拉菜单：防止在以编程方式更改所选选项时触发 onchange 事件
【发布时间】：2019-04-29 14:28:31
【问题描述】：

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

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

下拉菜单的 onchange 事件处理程序没有被执行（它只响应用户发起的事件）。

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

所以，当我这样做时：

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

onchange 事件被触发。

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

FIDDLE

所以，我的问题是：

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

谢谢！

【问题讨论】：

标签： javascript jquery semantic-ui

【解决方案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/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函数，系统认为你已经选择了你设置的值，所以不会触发更改事件。

【讨论】：

不幸的是，这也不会更新下拉列表。原始选择元素已更新，但被语义 UI 隐藏。 Semantic UI 创建的可见下拉菜单不显示新值。
感谢您的帮助。也许我忽略了一些东西，但它对我不起作用。你是对的 - 事件处理程序没有被触发，但下拉列表保持不变，仍然显示空白值。所以，我想如果有办法更新语义 UI 下拉列表以匹配相应隐藏选择元素的值，那将解决我的问题。
啊，当 javascript 完成加载时，我让它工作了。我可以在您更新的小提琴中看到它不起作用..
@KirillSafarov 我已经更新了我的代码以产生所需的结果。

【解决方案2】：

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

setValue 行为的一部分：

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

以及 setText 行为的一部分：

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

这样这将同时更新文本和值。

【讨论】：

我已经尝试过了，但是“设置值”仍然会触发事件处理程序。我已经更新了 Fiddle 以表明它不起作用。要么。