Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Blokujace radio
Forum PHP.pl > Forum > Przedszkole
Bojakki
2.01.2010, 14:07:29
Gdzies kiedy widziałem taki formularz z buttonami typu radio, gdzie byly jakby 2 etapy wyboru (modeli samochodow)

najpierw wybieralo sie marke (button radio)i wtedy odblokowywał sie wybór buttonów radio z modelami, pozostałe modele marek, które nie zostały wybrane były zablokowane. Podejrzewam że było to zrobione w javie, ale niestety nie pamieam strony i nie wiem. Moze ktos zna jakis tutorial lub cos podobnego jak to zrobic?
kefirek
2.01.2010, 14:10:31
http://www.skrypty-javascript.net/javascript/6.php
Bojakki
2.01.2010, 15:15:23
Próbuje przerobić to na własne potzreby ale mi sie nie udaje. Oto kod:

Kod
<script type="text/javascript">
function zamiana(wybor)
{
var kolory = new Array ("biały","zielony");
var rozmiar = new Array ("S1","L1","XL1");
if (wybor == "rozmiar") {
var dlugosc = rozmiar.length-1;
document.formularz.elements.drugi.options.length = rozmiar.length;
for (var i=0; i<= dlugosc; i++) {
document.formularz.drugi.options[i] = new Option(rozmiar[i]);
document.formularz.drugi.options[i].value = rozmiar[i];
}
}
if (wybor == "kolory") {
var dlugosc = kolory.length-1;
document.formularz.elements.drugi.options.length = kolory.length;
for (var i=0; i<= dlugosc; i++) {
document.formularz.drugi.options[i] = new Option(kolory[i]);
document.formularz.drugi.options[i].value = kolory[i];
}
}
}
</script>

[HTML] pobierz, plaintext 
  1. <form name="formularz">
  2. <select name="pierwszy" onChange="zamiana(this.value);" style="width: 150px;">
  3. <option value="kolory">kolory
  4. <option value="rozmiar">rozmiar
  5. </select>
  6. <select name="drugi" style="width: 150px;">
  7. <option value="biały">biały
  8. <option value="zielony">zielony
  9. </select>
  10. </form>
[HTML] pobierz, plaintext


Sa tutaj nielogiczne rzeczy, dlaczego w body w selecie drugim sa tylko wartosci dla kolorow?

W dodatku chce by kazdy rodzaj byl rozpoznawany po id, a nazwa ma sie tylk wyswietlac.

Moglby mi ktos pomoc by dostosowac to dla tekiego przypadku: (id - nazwa)

1. Opel
    11.
  • Astra
    12.
  • Kadet

2. Toyota
    21.
  • Corolla
    22.
  • Avensis

3. Fiat
    31.
  • Punto
    32.
  • Uno
kamil4u
2.01.2010, 15:52:02
To Ci powinno pomóc - gotowiec: http://www.dynamicdrive.com/dynamicindex1/...hainedmenu.html wszystko robisz poprzez prosty kod: http://www.dynamicdrive.com/dynamicindex1/...dmenu/config.js
Pawel_W
2.01.2010, 15:54:40
mam taki skrypt, napisany przeze mnie, tylko że zamiast radio jest lista select

jak chcesz to możesz go wykorzystać:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html> 
  2. <html> 
  3. 	<head> 
  4. 		<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> 
  5. 		<title>Skrypt</title> 
  6. <style type="text/css"> 
  7. select{
  8. 	margin: 10px;
  9. }
  10. </style> 
  11. <script type="text/javascript"> 
  12. var list = new Array();
  13. list["1|Ford"] = new Array();
  14. list["1|Ford"]["11|Jakis model"] = new Array();
  15. list["1|Ford"]["12|Jakis model"] = new Array();
  16. list["1|Ford"]["13|Jakis model"] = new Array();
  17. list["1|Ford"]["14|Jakis model"] = new Array();
  18. list["1|Ford"]["15|Jakis model"] = new Array();
  19. list["1|Ford"]["16|Jakis model"] = new Array();
  20. list["2|Audi"] = new Array();
  21. list["2|Audi"]["21|Jakis model"] = new Array();
  22. list["2|Audi"]["22|Jakis model"] = new Array();
  23. list["2|Audi"]["23|Jakis model"] = new Array();
  24. list["2|Audi"]["24|Jakis model"] = new Array();
  25. list["2|Audi"]["25|Jakis model"] = new Array();
  26. list["2|Audi"]["26|Jakis model"] = new Array();
  27. var size = 1; // wielkość listy
  28. var firstOpt = 'Wybierz kategorie';
  29. function createList(level)
  30. {
  31.  
  32. 	if(level!=-1)
  33. 	v = document.getElementById("list_drop").getElementsByTagName('select')[level].value;
  34. 	else
  35. 	v = '.';
  36.  
  37. 	level++;
  38.  
  39. 	lists = document.getElementById("list_drop").getElementsByTagName('select');
  40.  
  41. 	while(level != lists.length)
  42. 	{
  43. 	lists = document.getElementById("list_drop").getElementsByTagName('select');
  44. 	document.getElementById("list_drop").removeChild(lists[level]);
  45. 	}
  46.  
  47. 	if(v==firstOpt)
  48. 	return false;
  49.  
  50. 	obj = document.createElement('select');
  51.  
  52. 	str = '';
  53.  
  54. 	for(i=0;i<level;i++)
  55. 	{
  56. 		str+='["'+(document.getElementById("list_drop").getElementsByTagName('select')[i].value)+'"]';
  57. 	}
  58.  
  59. 	eval('current_list = list'+str+';');
  60.  
  61. 	obj.options[0] = new Option(firstOpt, firstOpt);
  62.  
  63. 	for (var key in current_list)
  64. 	{
  65. 		kkey = key.split('|');
  66. 		obj.options[obj.options.length] = new Option(kkey[1], key);
  67. 	}
  68. 	obj.setAttribute('size', size);
  69. 	obj.selectedIndex = -1;
  70. 	obj.name = 'select-list-level-'+level;
  71. 	obj.setAttribute('_level', level);
  72. 	obj.onchange = function(){
  73. 	createList(this.attributes['_level'].value);
  74. 	};
  75.  
  76. 		if(obj.options.length != 1)
  77. 		document.getElementById("list_drop").appendChild(obj);
  78. }
  79. </script> 
  80. 	</head> 
  81. 	<body onload="createList(-1);"> 
  82. <div id="list_drop"> 
  83.  
  84. </div> 
  85. 	</body> 
  86. </html> 
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.