Выпадающие списки семантического пользовательского интерфейса: предотвращение запуска события onchange при программном изменении выбранного параметра - PullRequest
Новая
       12

Выпадающие списки семантического пользовательского интерфейса: предотвращение запуска события onchange при программном изменении выбранного параметра

1 голос
/ 29 апреля 2019

Когда вы изменяете выбранное значение раскрывающегося списка программным обработчиком изменения в стандартном HTML, это событие не вызывается.Например, если я сделаю: 

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

, обработчик события onchange раскрывающегося списка не будет выполнен (он реагирует только на события, инициированные пользователем).

Я преобразую все раскрывающиеся списки в моемкод для Semantic UI (который является отличной библиотекой, кстати).Однако проблема в том, что теперь событие onchange срабатывает независимо от того, было ли изменение инициировано пользовательским взаимодействием или какой-либо функцией JS.

Итак, когда я делаю это: 

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

Событие onchange запущено.

Вот скрипка, которая показывает оба поведения:

FIDDLE

Итак, мои вопросы:

  • Есть ли другой способ (кроме "установить выбранный") для выбора одного из параметров в раскрывающемся списке, который не будет запускать событие обмена?
  • Если нет, есть лиспособ предотвратить запуск события?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 29 апреля 2019

Чтобы избежать этой проблемы, я бы разделил ее на две части:

Часть для поведения setValue: 

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

И часть для поведения setText: 

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

Так что это будет обновлять текст и значение.

0 голосов
/ 29 апреля 2019

Чтобы получить желаемое поведение, вам нужно заставить систему думать, что вы уже выбрали опцию, которую хотите выбрать. 

$(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, система думает, что вы уже выбрали значение, которое вы устанавливаете, поэтому событие изменения не срабатывает.

...