Czy możliwe jest umieszczenie dwóch selectów/list w jedynym dropdownie? Np. pierwszym selectem wybieramy marke samochodu, a drugim model samochodu. Czy możliwe jest zrobienie tego tak aby dopiero po wyborze marki i modelu samochodu oba selecty/listy znikały, a to co wybraliśmy pojawiało się w jakimś inpucie?
Dwa selecty/listy w jednym dropdownie - możliwe?
- Rejestracja: dni
- Ostatnio: dni
- Postów: 4700
1
tom8543 napisał(a):
Czy możliwe jest umieszczenie dwóch selectów/list w jedynym dropdownie?
Że co? Jak to miałoby wyglądać?
Czy możliwe jest zrobienie tego tak aby dopiero po wyborze marki i modelu samochodu oba selecty/listy znikały, a to co wybraliśmy pojawiało się w jakimś inpucie?
Tak, to jest możliwe. Trzeba na onchange oprogramować te funkcjonalności.
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Warszawa
- Postów: 2255
2
Zawsze można zaprogramować własną wersję Selecta (przykładem jest plugin select2), wiec da się. Ale mam wrażenie, że to może przerosnac umiejętności OP.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 52
0
Czy możliwe jest umieszczenie dwóch selectów/list w jedynym dropdownie?
Że co? Jak to miałoby wyglądać?
Dwa selecty koło siebie o takiej samej szerokości i wysokości. Nadany odpowiedni overflow dla obydwu. A co nie wygłądałoby to ostetycznie?
- Rejestracja: dni
- Ostatnio: dni
- Postów: 52
0
A czy lepiej umieścić dwie listy czy dwa selecty w jednym dropdownie? Jak to od waszej strony by wyglądało? I jak wykorzystac event onchange do tego aby dopiero po wyboru wartości w pierwszej liście/selekcie i drugiej liście/selekcie znikały obie listy/selecty?
Dzięki z góry za pomoc ;)
- Rejestracja: dni
- Ostatnio: dni
- Postów: 4700
0
tom8543 napisał(a):
A czy lepiej umieścić dwie listy czy dwa selecty w jednym dropdownie? Jak to od waszej strony by wyglądało? I jak wykorzystac event onchange do tego aby dopiero po wyboru wartości w pierwszej liście/selekcie i drugiej liście/selekcie znikały obie listy/selecty?
Moim zdaniem lepiej osobno. Do onChange obu list dodajesz tę samą funkcję, która sprawdza czy oba pola zawierają wartość różną od domyślnej, jeżeli tak to przenosisz wartość do nowego pola i usuwasz listy.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 52
0
Przedstawie za pomocą obrazka to co chce zrobić i objaśnię.
Zielone obramowanie - button
Brązowe obramowanie - dropdown (lista ul) z dwoma listami
Czerwone obramowanie - pierwsza lista (znacznik ul) z wyborem godzin
Zółte obramowanie - druga lista (znacznik ul) z wyborem minut
Jak to ma działać?:
- Na starcie na buttonie jest placeholder "TIME"
- Po kliknieciu w button rozwija się brązowe obramowanie wraz dwoma listami (czerwone i zółte obramowanie)
- Póki się nie wybierze godziny z pierwszej listy i minuty z drugiej listy dropdowny są ciągle rozwinięte
- Jak wybierze się zarówno godzinę i minutę obie listy (czerwone i zółte obrazmowanie) znikają, a w buttonie pojawia się wybrana godzina i minuta HH:MM.
Czy to na pewno jest możliwe do zrobienia? Jak są jeszcze jakieś wątpliwości to pytajcie a odpowiem.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
3
Ponieważ mam dobry humor (i nie chce mi się robić tego, co powinnam):
<!DOCTYPE html>
<html>
<head>
<title>tytul</title>
<style>
#godzina_minuta {
display:none;
}
#przycisk {
width:164px;
border:1px solid green;
}
#godzina, #minuta {
width:80px;
margin:0px;
border:1px solid red;
}
</style>
<script>
function wybor_pokaz() {
document.getElementById("godzina_minuta").style.display="block";
}
function wybor_testuj() {
var e_godzina = document.getElementById("godzina");
var i_godzina = e_godzina.selectedIndex;
if (i_godzina!=-1) {
godzina = e_godzina.options[i_godzina].value;
document.getElementById("godzina").style.borderColor="green";
}
var e_minuta = document.getElementById("minuta");
var i_minuta = e_minuta.selectedIndex;
if (i_minuta!=-1) {
minuta = e_minuta.options[i_minuta].value;
document.getElementById("minuta").style.borderColor="green";
}
if ((godzina!=-1) && (minuta!=-1)) {
document.getElementById("godzina_minuta").style.display="none";
document.getElementById("przycisk").innerHTML=godzina+":"+minuta;
}
}
godzina = -1;
minuta = -1;
</script>
</head>
<body>
<button id="przycisk" onclick="wybor_pokaz();">Time</button>
<div id="godzina_minuta">
<select id="godzina" size="12" onchange="wybor_testuj()">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
</select>
<select id="minuta" size="12" onchange="wybor_testuj()">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
</select>
</div>
</body>
</html>