Div láthatósága, select kiválasztásakor

Div láthatósága, select kiválasztásakor
2020-10-29T20:55:52+01:00
2020-10-29T22:40:51+01:00
2022-12-06T14:02:49+01:00
hello wolrd
Sziasztok!

Szeretnék egy olyan dolgot, hogy egy select-ben, kiválasztunk valamit, akkor az a <div> jelenjen meg, és az összes eltünjön. Találtam egy kódot, ami félig jó, de az csak azt mutatja meg, hogy hogyan tudjuk eltüntetni, és megjeleníteni 2 optionnal. 
How can I show a hidden div when a select option is selected?
Annyi ezzel a gond, hogy valamiért nem akar működni, ha több optiont rakok bele, vagy bármit modósítok rajta. Tudna valaki segíteni, vagy mutatni egy oldalt, vagy megmondani, hogy hogyan kéne, mert érdekelne a dolog.
Mutasd a teljes hozzászólást!
Hali!

Ugyebár jó lenne ha úgy lenne meg a végső kód, hogy ha hozzászeretnék rakni egy új listát, akkor egyszerűen hozzáadjam, és nem átírni az egész kódot.

Igen, ez lenne egy jó, bővíthető, újrafelhasználható kódnak az értelme.

Ha végiggondolod logikusan, hogy mit kellene tenned a kívánt eredményhez, rájössz, hogy nem ördöngösség:
1. Valamilyen módon meg kell feleltetned a select egyes option-jeinek a megfelelő div-eket. Célszerűen lehet pl. alkalmazni azt, hogy az option-ök value tulajdonsága a megfelelő div-ek id-jét tartalmazza (így, ha változik a select-ben kiválasztott elem – change esemény –, akkor a value alapján egyből meg is tudod „címezni” a megfelelő div-et).
2. Változtatáskor (a select change esemény-kezelőjében) elrejted az összes div-et, majd a select value-ja alapján megcímzettet megjeleníted.
Hogy' tudod elrejteni az összes div-et? Egyszerű: adsz nekik valami osztályt, majd lekérdezed az ilyen osztályú elemeket és elrejted (vagy CSS-szabályt állítasz be rájuk, vagy osztályt rendelsz hozzájuk vagy hidden attribútumot).
Hogy' tudod megjeleníteni csak a megcímzett div-et? Egyszerű: id alapján lekérdezed, és megjeleníted (elveszed az korábbi CSS-szabályt, vagy elveszed a korábbi osztályt vagy hidden attribútumot).
3. Induláskor az összes div-et elrejted és a select értékének megfelelőt megjeleníted.

Egy megvalósítást láthatsz itt: JSFiddle.

Mutasd a teljes hozzászólást!

  • Hali!

    Mutasd – forráskóddal/-részlettel –, hogy eddig mivel, hogyan próbálkoztál, meddig jutottál el, mi nem megy, miben/hol akadtál el! Nem először kérem már. 

    Mutasd a teljes hozzászólást!
  • Kültem egy linket, és azt a kódot másoltam ki, majd próbáltam bővíteni html, css, illetve js file-ban, hogy jó legyen, de nem jött össze.
    Mutasd a teljes hozzászólást!
  • Hali!

    … azt a kódot másoltam ki…

    Igen, azt meg tudjuk nézni – de az nem a te próbálkozásod.

    … majd próbáltam bővíteni html, css, illetve js file-ban, hogy jó legyen, de nem jött össze.

    Na, pontosan az ilyen „próbáltam kibővíteni”-kódok az érdekes (mivel ezek a te próbálkozásaid), azt is meg kellene osztanod.

    Mutasd a teljes hozzászólást!
  • Sok verziót csináltam, ezért nem tudok konkrét kódot írni, de leírom az egyiket.
    HTML:

    <select id="test" name="form_select" onchange="showDiv('hidden_div', 'hidden_div_2', this)"> <option value="0">alap</option> <option value="1">első</option> <option value="2">második</option> </select> <div id="hidden_div">első üzenet</div> <div id="hidden_div_2">második üzenet</div>
    CSS:

    #hidden_div { display: none; } #hidden_div_2 { display: none;
    JS:

    function showDiv(divId, element) { document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none'; document.getElementById(divId).style.display = element.value == 2 ? 'block' : 'none'; }

    Ugyebár jó lenne ha úgy lenne meg a végső kód, hogy ha hozzászeretnék rakni egy új listát, akkor egyszerűen hozzáadjam, és nem átírni az egész kódot.
    Mutasd a teljes hozzászólást!
  • Hali!

    Ugyebár jó lenne ha úgy lenne meg a végső kód, hogy ha hozzászeretnék rakni egy új listát, akkor egyszerűen hozzáadjam, és nem átírni az egész kódot.

    Igen, ez lenne egy jó, bővíthető, újrafelhasználható kódnak az értelme.

    Ha végiggondolod logikusan, hogy mit kellene tenned a kívánt eredményhez, rájössz, hogy nem ördöngösség:
    1. Valamilyen módon meg kell feleltetned a select egyes option-jeinek a megfelelő div-eket. Célszerűen lehet pl. alkalmazni azt, hogy az option-ök value tulajdonsága a megfelelő div-ek id-jét tartalmazza (így, ha változik a select-ben kiválasztott elem – change esemény –, akkor a value alapján egyből meg is tudod „címezni” a megfelelő div-et).
    2. Változtatáskor (a select change esemény-kezelőjében) elrejted az összes div-et, majd a select value-ja alapján megcímzettet megjeleníted.
    Hogy' tudod elrejteni az összes div-et? Egyszerű: adsz nekik valami osztályt, majd lekérdezed az ilyen osztályú elemeket és elrejted (vagy CSS-szabályt állítasz be rájuk, vagy osztályt rendelsz hozzájuk vagy hidden attribútumot).
    Hogy' tudod megjeleníteni csak a megcímzett div-et? Egyszerű: id alapján lekérdezed, és megjeleníted (elveszed az korábbi CSS-szabályt, vagy elveszed a korábbi osztályt vagy hidden attribútumot).
    3. Induláskor az összes div-et elrejted és a select értékének megfelelőt megjeleníted.

    Egy megvalósítást láthatsz itt: JSFiddle.

    Mutasd a teljes hozzászólást!
  • Köszönöm szépen! :D
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd