Jquery + select - poradna.net

Dobrý den, nevíte prosím někdo, proč od třídy t5 přestane toto fungovat? Když natvrdo přepíšu

$(".treti_uroven option.t6").show();
       $(".treti_uroven option.t6:first").attr('selected','true');

na t6 7 a vyšší, přestane to fungovat, nezobrazí to po rozkliknutí žádné volby.

<select class='treti_uroven'>
         
<option value='1' class='t1'>nerozhoduje  
<option value='2' class='t1'>Hrotový  
<option value='3' class='t1'>Revolverový  
<option value='4' class='t1'>Svislý – karuselový  
<option value='5' class='t1'>jiná  
<option value='6' class='t2'>Nerozhoduje  
<option value='7' class='t2'>Konzolová  
<option value='8' class='t2'>Nástrojařská  
<option value='9' class='t2'>Portálová  
<option value='10' class='t2'>Odvalovací  
<option value='11' class='t2'>Speciální  
<option value='12' class='t2'>Jiné  
<option value='13' class='t3'>Pro obrábění nerotačních součástí  
<option value='14' class='t3'>Pro obrábění rotačních součástí  
<option value='15' class='t3'>Jiná  
<option value='16' class='t4'>Nerozhoduje  
<option value='17' class='t4'>Sloupová  
<option value='18' class='t4'>Stojanová  
<option value='19' class='t4'>Radiální  
<option value='20' class='t4'>Souřadnicová  
<option value='21' class='t4'>Speciální  
<option value='22' class='t4'>Jiná  
<option value='23' class='t5'>Nerozhoduje  
<option value='24' class='t5'>Stolová  
<option value='25' class='t5'>Desková  
<option value='26' class='t5'>Jemná  
<option value='27' class='t5'>Jiná  
<option value='28' class='t6'>Nerozhoduje  
<option value='29' class='t6'>Hrotová  
<option value='30' class='t6'>Na díry  
<option value='31' class='t6'>Bezhrotá  
<option value='32' class='t6'>Rovinná  
<option value='33' class='t6'>Pásová  
<option value='34' class='t6'>Jiná  
<option value='35' class='t7'>Nerozhoduje  
<option value='36' class='t7'>Honovačka  
<option value='37' class='t7'>Stroj pro lapování  
<option value='38' class='t7'>Superfinišovací stroj  
<option value='39' class='t7'>Leštička  
<option value='40' class='t7'>Omílací stroj  
<option value='41' class='t7'>jiná  
<option value='42' class='t8'>Pila  
<option value='43' class='t8'>Vodní paprsek  
<option value='44' class='t8'>Laser  
<option value='45' class='t8'>Plazma  
<option value='46' class='t8'>Kyslíkový plamen  
<option value='47' class='t8'>Stříhání  
<option value='48' class='t8'>Speciální  
<option value='49' class='t8'>Jiná  



</select>
  <script>
   $("body").ready(function(){
       $(".treti_uroven option").hide();
       $(".treti_uroven option.t6").show();
       $(".treti_uroven option.t6:first").attr('selected','true');
      });
     </script>

Předmět	Autor	Datum
Ide o bug prehliadača Chrome, ktorý nezobrazuje option elementy v selecte, ak je pred ním veľa schov… los 01.12.2013 14:35	los	01.12.2013 14:35
Aha, máš pravdu, mozzila to zvládá bezproblemu, nemáš nějaký nápad, jak to jinak vyřešit ? zaborak 01.12.2013 15:29	zaborak	01.12.2013 15:29
Odporúčam položky dynamicky vkladať/odstraňovať z DOM namiesto takýchto trikov. MaSo 01.12.2013 15:43	MaSo	01.12.2013 15:43
Napríklad tak, že najprv prebehneš všetky možnosti a uložíš si ich do nejakej štruktúry. Následne, k… los 01.12.2013 15:53	los	01.12.2013 15:53
Super, nějak si s tím teda pohraju, díky moc poslední zaborak 01.12.2013 17:39	zaborak	01.12.2013 17:39

Ide o bug prehliadača Chrome, ktorý nezobrazuje option elementy v selecte, ak je pred ním veľa schovaných iných option elementov.

Trik so schovávaním option elementov nie je spoľahlivý a v mnohých iných prehliadačoch nebude fungovať. Odporúčam položky dynamicky vkladať/odstraňovať z DOM namiesto takýchto trikov.

Aha, máš pravdu, mozzila to zvládá bezproblemu, nemáš nějaký nápad, jak to jinak vyřešit ?

Odporúčam položky dynamicky vkladať/odstraňovať z DOM namiesto takýchto trikov.

Napríklad tak, že najprv prebehneš všetky možnosti a uložíš si ich do nejakej štruktúry. Následne, keď budeš potrebovať zobraziť len niektoré možnosti, tak ich tam povkladáš.

Príklad:

$('body').ready(function(){
	$('.treti_uroven').each(function() {
		// Toto si vytvoríš len raz.
		var data = new Object;
		for (var i = 0, n = this.options.length; i < n; ++i) {
			var option = this.options[i];
			if (!data[option.className])
				data[option.className] = new Array;
			data[option.className].push(option);
		}

		// Takéto niečo budeš volať vždy, keď budeš chcieť zmeniť možnosti.
		// Musíš si samozrejme zabezpečiť prístup k premennej data
		// (najjednoduchšie pomocou closure alebo globálnej premennej).
		var options = data['t8'];
		this.options.length = 0;
		for (var i = 0, n = options.length; i < n; ++i) {
			this.options[i] = options[i];
		}
	});
});

Edit:
Ešte napíšem, ako by sa to malo robiť poriadne. Viacúrovňový select by mal ideálne fungovať aj bez JavaScriptu (výnimkou sú samozrejme single page aplikácie). Začneš formulárom, kde na serveri vygeneruješ select prvej úrovne a ostatné selecty necháš prázdne. Pri obsluhe POST metódy doplníš položky pre select ďalšej úrovne podľa zvolenej hodnoty v selecte predchádzajúcej úrovne.

Potom to môžeš vylepšiť JavaScriptom tak, že si do stránky vložíš premennú s hodnotami pre všetky úrovne. Ďalšie selecty môžeš tak vypĺňať aj bez POSTu. Ak sú dáta pre všetky úrovne príliš veľké, použiješ Ajax.

Super, nějak si s tím teda pohraju, díky moc

Zpět do poradny Odpovědět na původní otázku Nahoru