Jump to content
GSForum - Segélyvonal

Select választása JS-el


Recommended Posts

Posted

Van 2 select mezõ és a másodikban megjelenõ menüket attól szeretném függõvé tenni hogy az elsõben mit választottak ki.

 

Igazából nem értek a JS-hez. Valami kész kódnak örülnél.

Köszönöm!

  • 1 year later...
Posted

Ismét szeretném jelezni, hogy rendkívül hálás vagyok mindenkinek a segítõ szándékért, de megkérdek mindenkit, hogy durván rossz példát ne mutassunk a kezdõknek.

 

Bocs, Arkangyal, de egyrészt nem erre gondolt, másrészt ez a kód durván invalid több helyen is, és inline JS 2009-ben? Ezt most kikapcsoltam... :(

Arkangyal1528464506
Posted

??? Akkor fogalmazzon konkrétabban :P. Vesszőkkel rágódjon ő vagy a w3 - futni meg fut és működik (1-1 alapon), pl. IE8 és Opera 10 alatt is.

 

~Mi is a pontos célunk?

Posted

Hogy rossz példát ne mutassunk, az például egy elég jó cél, így mindenképpen kerülném az invalid, hibás HTML kódot, és az inline JS-t, még akkor is ha fut. (???! Tele is van a web trágya szemét weboldalhegyekkel, amikben a HTML és a JS "fut" :nem: Pont ezen kéne változtatni a kezdők jó irányba terelgetésével, nem?)

 

Aztán az is lehet cél, hogy ráébresszük a kérdezőt, hogy az egy dolog, hogy JS-ből akarja megváltoztatni a második SELECT tartalmát, de arra gondolt vajon, hogy mi van akkor, ha az oldalára látogatónak nincs engedélyezve a JS? Google: graceful degradation javascript vagy progressive enhancement! 2009-et írunk és már azt sem sokáig, úgyhogy hajrá!

 

Én mondjuk így csinálnám. Ez sem tökéletes, és lehetne reszelni még hosszan, de most erre volt időm. Az alap HTML tartalmazza az összes SELECT-et. Ha nincs JS, megjelenik az összes kérdés, a LABEL-ek útbaigazítják az űrlapot kitöltőt. Ha van JS, akkor a megjelölt LABEL-eket és az azokhoz tartozó SELECT-eket elrejtjük, majd attól függően, hogy emberünk mit választ az első kérdésnél, a megfelelő második kérdést látja. Bónuszként meg lehet csinálni, hogy a LABEL-jét is átalakítjuk, hogy immár ne legyen benne a "Ha az előző kérdésnél bla-bla-bla...", én most ezzel nem foglalkoztam.

 

pelda1.html

 

<!DOCTYPE html>
<html>
    <title>SELECT PÉLDA</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
    <script type="text/javascript" src="pelda1.js"></script>
    <style type="text/css">
        label, select { display: block; margin: 1em 0; }
        .hidden  { display: none;  }
        .visible { display: block; }
    </style>
</html>
<body>
<form name="fForm" action="" method="get">

<label for="q1">Szerinted a bla-bla-bla <em>Aaaaa</em> vagy <em>Bbbb</em> vagy <em>Cccccccc</em>?</label>
<select name="q1" size="3">
    <option value="qA">Aaaaa</option>
    <option value="qB">Bbbb</option>
    <option value="qC">Cccccccc</option>
</select>

<label for="qA" class="hide_me">Ha az előző kérdésnél az <strong>Aaaaa</strong>-t választottad, bla-bla-bla...?</label>
<select name="qA" id="qA" size="2">
    <option value="a1">Aaaa1</option>
    <option value="a2">Aaaaaa2</option>
</select>

<label for="qB" class="hide_me">Ha az előző kérdésnél a <strong>Bbbb</strong>-t választottad, bla-bla-bla...?</label>
<select name="qA" id="qB" size="3">
    <option value="b1">Bbbbb1</option>
    <option value="b2">Bbbbbbb2</option>
    <option value="b3">B3</option>
</select>

<label for="qC" class="hide_me">Ha az előző kérdésnél a <strong>Cccccccc</strong>-t választottad, bla-bla-bla...?</label>
<select name="qC" id="qC" size="4">
    <option value="c1">Cccccc1</option>
    <option value="c2">Ccccc2</option>
    <option value="c3">Ccc3</option>
    <option value="c4">Cccccc4</option>
</select>

<button type="submit" name="gomb" value="akarmi">Elküld</button>
</form>
</body>
</html>

 

pelda1.js

 

window.onload = init;

function init() 
{
    var i, n, id, old_id;

    var lids = [];
    var labels  = document.getElementsByTagName("label");
    for (i=0, n=labels.length; i<n; i++)
    {
        if (labels[i].className == 'hide_me')
        {
            id=labels[i].getAttribute('for');
            document.getElementById(id).className="hidden";
            labels[i].className = 'hidden';
            lids[id] = i;
        }
    }

    if (document.fForm && document.fForm.q1 && document.fForm.qA && document.fForm.qB && document.fForm.qC) 
    {
        document.fForm.q1.selectedIndex = -1;
        old_id = '';

        document.fForm.q1.onchange = function()
        {
            id = document.fForm.q1.value; 
            if (id != old_id)
            {
                if (old_id != '')
                {
                    document.getElementById(old_id).className = "hidden";
                    labels[lids[old_id]].className = "hidden";
                }
                document.getElementById(id).className = "visible";
                labels[lids[id]].className = "visible";
                old_id = id;
            }
        };
    }
}

Általában fel szoktam kommentezni a forrást, ez most elmaradt, elnézést érte, mint ahogy azért is, hogy nem strukturáltam szépre a HTML kódot (nem tologattam beljebb a form elemeket).

 

Ha nem értetek valamit, kérdezzetek!

Arkangyal1528464506
Posted

Véleményem:

 

_Szerintem_ működjön. Grace-ről meg már írtam véleményemet a HTML egyik témájában.

 

Leírtam egy alap koncepciót, amire szerintem gondolhatott kalóz a megfogalmazása alapján, _nekem_ ennyi megfelelne, hogy elinduljak (hogy gracehez /akarom mondani mindenhez való kompatibilitáshoz, de leginkább szabványhoz - a grace ennyi/ mennyire közelíti, legyen saját ügye).

 

Én nem látom értelmét, hogy akár csak 1 órát vacilláljak egy kód sorozat összeállításával, mikor "átláthatóság" miatt sokkal ésszerűbbnek tűnik egy "alap" vackot összedobni. Rajtad kívül sem látom itt, hogy mást is felháborítana az elgondolás, görcsösen ragaszkodsz hozzá, hogy maximalistán eleget tegyen a válasz minden, a problémában nem kért, feltételnek is. Ezt hívják az idő pazarlásnak: majd nyitok egy subrutin témát, amire folyamatosan lehet hivatkozni a megírt kódból...

 

"Mi van, ha nincs engedélyezve a JS?" Erre van több válasz is:

1. nem érdekel, ennyire van időm;

2. <NOSCRIPT>;

3. flash.

4. stb. Csak szerver vagy kliens oldal vagyok? Stb.

Másik témánál flasht ajánlottál, az meg flash plugin nélkül nem menne, akadályok voltak-vannak-lesznek. Ha kalózt érdekli ezek leküzdése is, akkor megírja - ő nem írta. De írok egy ötletet, hátha ez jobb megközelítés számodra: a Webszerkesztés fórumba belépéssel a felhasználónak el kelljen fogadnia egy szabályzatot, mi alapján ő se nem kérdezhet a grace figyelmbe vétele nélkül, se nem válaszolhat. Esetleg egészítsétek ki ezt a fenti szöveget (~ne mássoljatok be hosszú kódot, persze grace nélkül nehéz lesz).

 

Nos, én átlátom a kódodat, de kalóz írása alapján akár fogadni is mernék rá, hogy dunsztja sem lesz róla, hogy miket tartalmaz, mi micsoda, stb. Az enyém puritán, átlátható, reményeim szerint könnyen érthető volt - s azt is gondoltam, hogy az ő céljának megfelelt (-grace).

  • 4 months later...
Posted

Elnézést, hogy ilyen sokáig nem írtam, de nem tudtam foglalkozni a kérdéssel.

Viszont, sajnos még nem tudtam megoldani a dolgot. Leírom pontosabban hogyan mûködne a dolog.

Intranetes hálózaton menne. Egy mysql adatbázisban lennének az adatok az alábbi egyszerû szerkezetben:

 

id -> azonosító

nev -> Megjelenõ szöveg

sub_id -> szülõ id értéke

 

(pl:

1, férfi, 0

2, nõ, 0

3, Gábor, 1

4, Béla, 1,

5, Tímea, 2

6, Ildikó, 2)

 

Egy lekérdezés után (amelyik sub_id=0) kilistázzuk az elsõ selectet. Addig a többi inaktív, vagy üres. Amikor az elsõt kiválasztottuk, lekérdezzük a következõ select tartalmát, mégpedig az szerint hogy pl "Where sub_id=$_GET[id]", ekkor a második select is "feltöltõdik" adattal, de csak azzal ami ami megfelel a lekérdezésnek és így tovább akár 4-5 select-en keresztül.

Posted

Két lehetőség van:

 

1. Ajax. Az első select tartalmát berakja az oldalt felépítő php, majd a JS figyeli a választást, elküldi a háttérben üldögélő másik php-nak, az visszadobja az új választási lehetőségeket, a JS berakja a második selectbe és így tovább.

 

2. Nem Ajax. Ez esetben az összes adatot leküldi a php a JS-nek az oldal felépítésekor, és a JS egyedül kilogikázza, hogy az egyes selectek kiválasztásakor a soron következőnek milyen tartalma lehet.

 

AJAX-hoz javaslom a jQuery $.load funkcióját, azzal nagyon könnyen viszonylag egyszerűen meg lehetne csinálni. ;)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...