Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Click event on select > option element. (https://javascript.ru/forum/dom-window/71175-click-event-select-option-element.html)

Nexus 31.10.2017 10:32

Click event on select > option element.
 
Здравствуйте.
Возможно ли перехватить событие "клик" по опции нативного селекта?
Событие 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 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 31.10.2017 10:43

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

ksa 31.10.2017 10:51

Цитата:

Сообщение от Nexus
Ваш код не работает

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

Цитата:

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

Отнюдь... :(

Nexus 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 31.10.2017 11:04

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


Часовой пояс GMT +3, время: 10:41.