Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2017, 00:03
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Стилизация option
Надо задать свои стили для option (сменить фон при наведении и сделать отступы), готовые решения есть, но они очень громоздкие и я решил написать свой код, он работает, какие в нём есть недостатки?


А php программист, за такое руки не оторвёт?

<style>

.chooce-option {
	padding: 5px;
	width: 242px;
	height: 20px;
	display: inline-block;
	vertical-align: top;
	border: 1px solid;
}

.chooce-option:hover {
	cursor: pointer;
}

.chooce-value {display: none;}

	ul {
		padding: 0;
		list-style: none;
	}
	
	li {
		padding: 5px;
	}
	
	li:hover{
		background: #0c6eb9;
		color: white;
	}

.styled-select {
   width: 240px;
   height: 124px;
   overflow-x: hidden; 
   border: 1px solid #ccc;
   display: none;
   }


</style>

<form method="post">

<input type="text" name="chooceCity" value= "-" class="chooce-option" readonly>
<input type="text" value="0" name="chooceValue" class="chooce-value" readonly>
<div class="styled-select">

   <ul>
		<li data-value="1">Пункт 1</li>
		<li data-value="2">Пункт 2</li>
		<li data-value="3">Пункт 3</li>
		<li data-value="4">Пункт 4</li>
		<li data-value="5">Пункт 5</li>
		<li data-value="6">Пункт 6</li>
		<li data-value="7">Пункт 7</li>
		<li data-value="8">Пункт 8</li>
		<li data-value="9">Пункт 9</li>
		<li data-value="10">Пункт 10</li>
		<li data-value="11">Пункт 11</li>
		<li data-value="12">Пункт 12</li>
		
   </ul>
</div>
<br>
<br>
<input type="submit" value="Добавить вопрос" name="addQuestion">
</form>


<script>
	var listCity = document.querySelector(".styled-select");
	var showListCity = document.querySelector(".chooce-option");
	var cityValue = document.querySelector(".chooce-value");
	
	var options = document.querySelectorAll("li");
	
	
	showListCity.addEventListener("click", function(e){
		if(listCity.style.display != 'block') {
			listCity.style.display = 'block';
		}
		
		else {
			listCity.style.display = 'none';
		}
		
		options.forEach(function(item, i, arr) {
			options[i].addEventListener('click', function(t){
				console.log(t.target.getAttribute("data-value"))
				showListCity.value = t.target.innerHTML;
				
				cityValue.value = t.target.getAttribute("data-value");
				console.log(cityValue.value)
				listCity.style.display = 'none';
			})
		});
		
	})
	
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 09.08.2017, 00:05
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Ещё я заметил, что если несколько раз что-то выбрать, то консоль сильно захламляется, почему так?
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2017, 02:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

DivMan,
РНР к этому отношения не имеет, а вот костомизация, это SELECT, который работает в фоне, а UL лишь интерфейс собственный.
Ответить с цитированием
  #4 (permalink)  
Старый 09.08.2017, 18:38
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

DivMan,

Ты на каждый клик по showListCity добавляешь слушатели событий на options. Зачем?
Вынеси их добавление из обработки клика на showListCity
Ответить с цитированием
  #5 (permalink)  
Старый 09.08.2017, 19:47
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Так?

var listCity = document.querySelector(".styled-select");
	var showListCity = document.querySelector(".chooce-option");
	var cityValue = document.querySelector(".chooce-value");
	
	var options = document.querySelectorAll("li");
	
	
	showListCity.addEventListener("click", function(e){
		if(listCity.style.display != 'block') {
			listCity.style.display = 'block';
		}
		
		else {
			listCity.style.display = 'none';
		}
		
		
		
	})
  
        options.forEach(function(item, i, arr) {
	    options[i].addEventListener('click', function(t){
		console.log(t.target.getAttribute("data-value"))
		showListCity.value = t.target.innerHTML;
				
		cityValue.value = t.target.getAttribute("data-value");
		console.log(cityValue.value)
		listCity.style.display = 'none';
	})
});
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2017, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

DivMan,
https://javascript.ru/forum/misc/590...tml#post393087
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2017, 23:39
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Я ещё нашёл одну проблему, почему, при клике на какой-нибудь пункт, с мобильного устройства (проверял на nokia rm-980 ), то пункт не выбирается и меню не закрывается, а с планшета и с компа нормально работает?
Ответить с цитированием
  #8 (permalink)  
Старый 10.08.2017, 00:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от DivMan
Я ещё нашёл одну проблему
Сообщение от Rise
Пользователи могут по разному взаимодействовать (мышь, клавиатура, сенсор
https://developer.mozilla.org/ru/doc...I/Touch_events
Ответить с цитированием
  #9 (permalink)  
Старый 10.08.2017, 22:25
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Изменил на touchstart и не знаю, почему не работает

var listCity = document.querySelector(".styled-select");
			var showListCity = document.querySelector(".chooce-option");
			var cityValue = document.querySelector(".chooce-value");
			
			var select = document.querySelector(".list-city");
			var options = select.querySelectorAll("li");
	
	
		showListCity.addEventListener("touchstart", function(e){
			if(listCity.style.display != 'block') {
				listCity.style.display = 'block';
			}
			
			else {
				listCity.style.display = 'none';
			}
			
			options.forEach(function(item, i, arr) {
				options[i].addEventListener('touchstart', function(t){
					console.log(t.target.getAttribute("data-value"))
					showListCity.value = t.target.innerHTML;
					cityValue.value = t.target.getAttribute("data-value");
					console.log(cityValue.value)
					listCity.style.display = 'none';
				})
			});
		})
Ответить с цитированием
  #10 (permalink)  
Старый 10.08.2017, 22:29
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Добавил touchend и всё равно не работает

var listCity = document.querySelector(".styled-select");
			var showListCity = document.querySelector(".chooce-option");
			var cityValue = document.querySelector(".chooce-value");
			
			var select = document.querySelector(".list-city");
			var options = select.querySelectorAll("li");
	
	
		showListCity.addEventListener("touchstart", function(e){
			if(listCity.style.display != 'block') {
				listCity.style.display = 'block';
			}
			
			else {
				listCity.style.display = 'none';
			}
			
			options.forEach(function(item, i, arr) {
				options[i].addEventListener('touchstart', function(t){
					t.target.addEventListener('touchend', function(){
						console.log(t.target.getAttribute("data-value"))
						showListCity.value = t.target.innerHTML;
						cityValue.value = t.target.getAttribute("data-value");
						console.log(cityValue.value)
						listCity.style.display = 'none';
					})
					
				})
			});
		})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Стилизация option mrship Элементы интерфейса 3 10.12.2016 19:38
Добавить скриптом классы на option Quark_ Общие вопросы Javascript 7 11.07.2016 12:13
Новый input при выборе определенного option SLameN Элементы интерфейса 4 03.07.2015 16:29
Изменение selecta при выборе option ainur777 Общие вопросы Javascript 1 10.01.2015 16:23
Как заставить меняться стиль option одного селекта в зависимости от выбора option.. print_r Общие вопросы Javascript 1 08.01.2013 23:11