Javascriptové eventy v select <option>

j0hny

Zdravím,

narazil jsem na problém s nette formuláři. Když si chci k nějakému formulářovém prvku přidat atributy v šabloně, použiju např. {input blabla value=>‚neco‘}. S tímto úspěšně už nějaký čas funguji. Teď bych ale potřeboval totéž provéct u selectu a to přímo v jeho zanořeném tagu option. Tady je zjědnodušený výstup jakého se snažím docílit.

<select>
	<option onclick="document.getElementById('obj').style.visibility='hidden';">1</option>
	<option onclick="document.getElementById('obj').style.visibility='hidden';">2</option>
	<option onclick="document.getElementById('obj').style.visibility='visible';">Vlastni</option>
</select>
<input id="obj" style="visibility: hidden" />

Jedná se zkrátka o to, že v selectu si člověk vybere buď číselnou hodnotu, nebo pole vlastní. Když se vybere pole vlastní, odkryje se vedle klasický input. Když se pak vybere jiná hodnota, input se opět zkryje. Problémem jsou onclick idálosti v jednotlivých option. Vzhledem k tomu že metoda addSelect vytvoří select kompletně, nepřišel jsem na možnost jak editovat přímo jednotlivé option tagy…

Je nějaká možnost jak toho docílit? Nebo možnost použití vlastního kódu ve formuláři při zachování všech vlastností Nette/Form?? (toto pole je součástí většího formuláře)

Předem díky za odpovědi!!!

Michal Vyšinský

Nebylo by lepší toto: https://doc.nette.org/cs/formsi#… ?

Vojtěch Dobeš

Nebylo by lepší použít unobtrusive Javascript v externím souboru?

j0hny

CherryBoss napsal(a):

Nebylo by lepší toto: https://doc.nette.org/cs/forms#… ?

Tak tohle jsem nějak při procházení dokumentace přehlídl, to je přesně to co potřebuji, funguje výborně. Díky!

vojtech.dobes napsal(a):

Nebylo by lepší použít unobtrusive Javascript v externím souboru?

To co jsem napsal bylo jenom takhle jednoduše pro přehlednost, určitě bych to jinak dal mimo a udělal to trochu víc hladce :-)

j0hny

Tak výše uvedené už mi funguje bezproblémově, ale narazil jsem při tvorbě celého formuláře ještě na jeden problém. Je to sice malinko odlišné, ale napíšu to sem ať nezakládám další topic.

Mám tři selecty, v každém řekněme tři možnosti. Defalutně je vždy první možnost. Já potřebuji přidat čtvrtý select, který bude mít řekněme dvě možnosti. Ty se nebudou nikam posílat (respektive klidně můžou, ale nebudou se zpracovávat), select bude sloužit k nastavení hodnot v těch ostatních selectech.

Příklad:
dejme tomu, že budu mít tři selecty kde si budu moci vybrat hodnoty 1 a 2. Vedle budu mít další select, pomocí kterého budu moci najednou vybrat ve všech ostatních selectech buď 1 nebo 2. Takže já si u něj najedu na 1, všude se mi vybere 1, ale nic se neodešle, pouze vybere.

Neměl by někdo řešení? Ještě dodám že JavaScript je pro mě jenom ‚něco v čem jsou psané knihovny co používám‘, ale prakticky ho umím jen velmi málo, takže mě prosím nelynčujte pokud je řešení očividné :)

Michal Vyšinský

Jestli chceš mít teda všude hodnoty podle toho jednoho selectu tak asi takto:

přidej těm selectům class=„dependent-selectbox“ (nebo klidně jinou)
tomu selectu dej id=„parent-selectbox“

Pak js skript (předpokládám přítomnost jQuery):

$(function(){
	$(document).on("change", "#parent-selectbox", function(){
		$(".dependent-selectbox").val($(this).val());
	});
});

Nemám to vyzkoušené, ale mělo by to jet.

Edit: Respektive místo document může být selektor formuláře „#id-formulare“

Editoval CherryBoss (24. 7. 2013 14:04)