Форум

Nexus · #1 (**permalink**) 31.10.2017, 10:32

Здравствуйте.
Возможно ли перехватить событие "клик" по опции нативного селекта?
Событие change не подходит.

Макет:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="sort_by" data-role="async-filter">
	<option value="novelty-desc" selected="">Новизне ↑</option>
	<option value="title">Алфавиту ↑</option>
	<option value="price">Цене ↑</option>
	<option value="rating">Рейтингу ↑</option>
</select>
<script>
	$(function(){
		
	});
</script>

Интересует клик по выбранному опшену, клик по другим вызовет change event.

Заранее благодарю.

ksa · #2 (**permalink**) 31.10.2017, 10:39

Сообщение от Nexus

Возможно ли перехватить событие "клик" по опции нативного селекта?

Так это легко проверить самому

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('select > option').click(function(){alert(1);});
});
</script>
</head>
<body>
<select name="sort_by" data-role="async-filter">
	<option value="novelty-desc" selected="">Новизне ↑</option>
	<option value="title">Алфавиту ↑</option>
	<option value="price">Цене ↑</option>
	<option value="rating">Рейтингу ↑</option>
</select>
</body>
</html>

Nexus · #3 (**permalink**) 31.10.2017, 10:43

ksa, у меня самого ничего не вышло.
Надеялся на ответ типа этого: «Конечно можно, попробуй так...»

Ваш код не работает (у вас ведь тоже?).

ksa · #4 (**permalink**) 31.10.2017, 10:51

Сообщение от Nexus

Ваш код не работает

Он демонстрирует невозможность этой затеи...

Сообщение от Nexus

Надеялся на ответ типа этого: «Конечно можно, попробуй так...»

Отнюдь...

Nexus · #5 (**permalink**) 31.10.2017, 11:00

Решил проблему костылем:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="sort_by" data-role="async-filter">
	<option value="novelty-desc" selected="">Новизне ↑</option>
	<option value="title">Алфавиту ↑</option>
	<option value="price">Цене ↑</option>
	<option value="rating">Рейтингу ↑</option>
</select>
<script>
	$(function(){
		$('[data-role="async-filter"]').on('click',function(){
			if(!this.value || this.hasAttribute('data-orig-value'))
				return;

			$(this).attr('data-orig-value',this.value)
				.find(':selected').prop('selected',false).removeAttr('selected');
			
			this.value=null;
		}).blur(function(){
			if(!!this.value)
				return;

			var $t=$(this);
			this.value=$t.attr('data-orig-value');
			$t.removeAttr('data-orig-value');
		}).change(function(){
			console.log('Change');
		});
	});
</script>

Nexus · #6 (**permalink**) 31.10.2017, 11:04

ksa, спасибо за ответ.

Форум

Справочник

Discord чат

Курсы javascript