Dwa selecty/listy w jednym dropdownie - możliwe?

0

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?

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.

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.

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?

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

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.

0

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

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ć?:

  1. Na starcie na buttonie jest placeholder "TIME"
  2. Po kliknieciu w button rozwija się brązowe obramowanie wraz dwoma listami (czerwone i zółte obramowanie)
  3. Póki się nie wybierze godziny z pierwszej listy i minuty z drugiej listy dropdowny są ciągle rozwinięte
  4. 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.

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>

1 użytkowników online, w tym zalogowanych: 0, gości: 1