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?
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.
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.
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?
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 ;)
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.
chyba to jest typowy problem XY
@tom8543 moglbys opisac biznesowo co chcesz osiagnac? (bez technicznych detali)
Bo cos mi sie wydaje, ze jest lepsze rozwiazanie niz dwa selecty w jednym dropdownie...
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.
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>