Надо задать свои стили для option (сменить фон при наведении и сделать отступы), готовые решения есть, но они очень громоздкие и я решил написать свой код, он работает, какие в нём есть недостатки?
А php программист, за такое руки не оторвёт?
https://jsfiddle.net/bqpfbnng/
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?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>';
}
}
?> |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| .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;
} |
|
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <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> |
|
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| 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';
})
});
}) |
|
(
