Js/jquery get selected option of closest select by name

Js/jquery get selected option of closest select by name
2020-11-08T20:23:05+01:00
2020-11-09T09:23:05+01:00
2022-10-15T21:25:48+02:00
X_ecutor
Sziasztok!

Gondom egyszerűnek tűnik, mégsem tudtam megoldani egyedül, ezért segítséget kérnék.

A címben angolul már nagyjából megfogalmaztam. Van egy input mezőm amit már meg tudtam fogni, és arra vagyok kíváncsi, hogy az ehhez leközelebb lévő select-ben éppen mi van kiválasztva, tehát a kiválasztott elem value értékére lennék kíváncsi, és a select-et a name attribútum alapján szeretném megkeresni. Ezzel prbólákoztam, de sajnos undefined értéket kapok vissza az alertnél:

$("body").on("change",".check_elzaro_1",function() { if($(this).val() > 0) { var select = $(this).closest("select[name='elzaro1azon']").children('option:selected').val(); alert(select); } });

Az egésszel az lenne majd a célom, hogy ha az input értéke (.check_elzaro_1) nagyobb mint 0 (eddig működik) akkor keresse meg a hozzá legközelebb álló olyan selectet aminek a name attribútuma "elzaro1azon" (ebből több is van, mert több soros a dolog) és nézzük meg, hogy van-e kiválasztva valami, mivel az első sorba van betéve egy üres option ami alapértelmezetten a kiválasztott (selected) és ha ez van kiválasztva, tehát a value=0 akkor majd css-el teszek a selectre egy figyelmeztetést, ellenkező esetben nincs akció.
Mutasd a teljes hozzászólást!
Lehet keresgélni, de én biztosan megmondanám előre az inputoknak, hogy mi a "cél-select", amit majd vizsgálni kell, valahogy így:

<input class="form-control smallfont rounded-0 check_elzaro_1" name="elazaro1hossz[]" data-selectid="select_1"> (...) <input class="form-control smallfont rounded-0 check_elzaro_1" name="elazaro1szel[]" data-selectid="select_1"> (...) <select id="select_1" class="form-control smallfont rounded-0" name="elzaro1azon[]"> (...) </select>
(Én itt egy id-t adtam neki, persze lehet más selector is)


Majd, amikor az input change megtörténik:

var select = $("#" + $(this).data("selectid")); alert(select.val());
Mutasd a teljes hozzászólást!

  • Szerintem egyszerűen félreértetted a closest() működését.

    Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

    Ha pl. az input és a select egy közös div-ben akkor léphetnél egyet felfele (parent), majd azon egy find + talán egy :first, valahogy így:

    $(this).parent().find("select[name='elzaro1azon']:first")
    Van olyan is, hogy siblings() de ez is csak tipp... a konkrét markup ismerete nélkül nehéz bármit is javasolni.
    Mutasd a teljes hozzászólást!
  • <div> <label></label> <div> <input class="form-control smallfont rounded-0 check_elzaro_1" name="elazaro1hossz[]"> </div> </div> <div> <label></label> <div> <input class="form-control smallfont rounded-0 check_elzaro_1" name="elazaro1szel[]"> </div> </div> <div> <label></label> <div> <select class="form-control smallfont rounded-0" name="elzaro1azon[]"> <option selected="" label="" value=""></option> ....</div></div>


    Elképzelhető, hogy inkább find mint closest.....
    Mutasd a teljes hozzászólást!
  • Lehet keresgélni, de én biztosan megmondanám előre az inputoknak, hogy mi a "cél-select", amit majd vizsgálni kell, valahogy így:

    <input class="form-control smallfont rounded-0 check_elzaro_1" name="elazaro1hossz[]" data-selectid="select_1"> (...) <input class="form-control smallfont rounded-0 check_elzaro_1" name="elazaro1szel[]" data-selectid="select_1"> (...) <select id="select_1" class="form-control smallfont rounded-0" name="elzaro1azon[]"> (...) </select>
    (Én itt egy id-t adtam neki, persze lehet más selector is)


    Majd, amikor az input change megtörténik:

    var select = $("#" + $(this).data("selectid")); alert(select.val());
    Mutasd a teljes hozzászólást!
  • Jó lehet, de a gondom az, hogy ennél jóval bonyolultabb a dolog, mert ez amit írtam layout csak 1 sor. Ebből több is van, ráadásul nem fix, ez az egész generálva van, méghozzá egy clone segítségével, tehát van lehetőség ezekből a sorokból tetszőleges mennyiségben generálni, meglévőből törölni, aztán egy submit segítségével elküldöm az adatokat, ezért van tömbként gyűjtve a változó (elazaro1hossz[]) szóval ehhez amit írtál át kellene alakítanom, beiktatni egy inkrementálódó változót, mert ugye az id-nak egyedinek kell lennie, de mivel generált az egész, és lehet törölni is, akkor ezt a változót szemmel kellene tartani....tudom, hogy egy id sokat segíthetne, mert arra direktben is tudok keresni, csak próbáltam volna elkerülni...
    Minden esetre megpróbálkozok vele, írok majd hogy sikerült-e :)
    Mutasd a teljes hozzászólást!
  • Írtam, hogy lehet más selector is, nem muszáj ID-t használni.
    Lehet pl. name/class, és akkor a találatokból kiveszed az elsőt... vagy valami.

    Vagy, ahogy korábban írtam keresgélhetsz is: pl. az inputokat és a hozzá tartozó selectet beteszed egy közös wrapper div-be, amit megtalálsz mondjuk closest-tel, majd ezen nyomsz egy find-ot...
    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