Стилизация 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>

Ещё я заметил, что если несколько раз что-то выбрать, то консоль сильно захламляется, почему так?

DivMan,
РНР к этому отношения не имеет, а вот костомизация, это SELECT, который работает в фоне, а UL лишь интерфейс собственный.

DivMan,

Ты на каждый клик по showListCity добавляешь слушатели событий на options. Зачем?
Вынеси их добавление из обработки клика на showListCity

Так?

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';
	})
});

DivMan,
https://javascript.ru/forum/misc/590...tml#post393087

Я ещё нашёл одну проблему, почему, при клике на какой-нибудь пункт, с мобильного устройства (проверял на nokia rm-980 ), то пункт не выбирается и меню не закрывается, а с планшета и с компа нормально работает?

Изменил на 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';
				})
			});
		})

Добавил 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';
					})
					
				})
			});
		})