09.08.2017, 00:03
|
Профессор
|
|
Регистрация: 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>
|
|
09.08.2017, 00:05
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
Ещё я заметил, что если несколько раз что-то выбрать, то консоль сильно захламляется, почему так?
|
|
09.08.2017, 02:17
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
DivMan,
РНР к этому отношения не имеет, а вот костомизация, это SELECT, который работает в фоне, а UL лишь интерфейс собственный.
|
|
09.08.2017, 18:38
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
DivMan,
Ты на каждый клик по showListCity добавляешь слушатели событий на options. Зачем?
Вынеси их добавление из обработки клика на showListCity
|
|
09.08.2017, 19:47
|
Профессор
|
|
Регистрация: 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';
})
});
|
|
09.08.2017, 20:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
|
09.08.2017, 23:39
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
Я ещё нашёл одну проблему, почему, при клике на какой-нибудь пункт, с мобильного устройства (проверял на nokia rm-980 ), то пункт не выбирается и меню не закрывается, а с планшета и с компа нормально работает?
|
|
10.08.2017, 22:25
|
Профессор
|
|
Регистрация: 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.08.2017, 22:29
|
Профессор
|
|
Регистрация: 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';
})
})
});
})
|
|
|
|