Стилизация option + PHP

229

09 августа 2017, 20:47

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

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

 <?php
    if(!empty($_POST['addQuestion'])) {
        if(!empty($_POST['chooceCity']) && !empty($_POST['chooceValue'])) {
            echo $_POST['chooceCity'] . ' <br>';
            echo $_POST['chooceValue'] . ' <br>';
            echo '<br>';
            echo '<br>';
            echo '<br>';
        }
        else {
            echo 'Выберите город';
            echo '<br>';
            echo '<br>';
            echo '<br>';
        }
    }
?>

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

.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; 
   }

<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>

Answer 1

echo $_POST['chooceCity'] . ' <br>';

За вывод пользовательского ввода на страницу надо руки отрывать, потому что XSS.

options.forEach(function(item, i, arr) {
    options[i].addEventListener('click', function(t){

Надо использовать всплытие событий и подписываться один раз на списке.

какие в нём есть недостатки?

При отключенном js ничего работать не будет.
Чтобы этого избежать можно формировать разметку скриптом из нормального select'а.
Его же использовать для хранения значения.
Если первое не требуется, то я бы сделал input type hidden, а выбранный вариант показывал просто в div'е. Так будет больше возможностей для редактирования.

PS: А вообще, детально не смотрел.