Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Problem z dynamicznym SELECTem
Forum PHP.pl > Forum > Przedszkole
Ulysess
30.01.2011, 19:37:59
witam mam formularz w którym znajdują sie 2 SELECTy i chciałbym (lecz nie znam w ogóle JS..) zrobić na zasadzie że w momendzie gdy user wybierze którą z nacji to w tabeli w wierszu 1 wstawią się jakieś wartości i to samo z profesja. przypuszczam że do tego będzie potrzebna instrukcja switch ale jak zrobić to nie mam zielonego pojęcia..

hmm próbowałem wpierw sprawdzić która opcja została wybrana ale nawet to nie działa..

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3.     function f1(pole)
  4.     {
  5.                 var form = document.forms['formularz'];
  6.                 var wartosc = form.elements["nacja" + pole].value;
  7.  
  8.                 if (wartosc == 0)
  9.                 {
  10.                     form.elements[kwota[1]].style.display='none';
  11. 					document.write('Hello World 1');         
  12.                 }
  13.                 if (wartosc == 1)
  14.                 {
  15.                     form.elements[kwota[1]].style.display='block';
  16. 					document.write('Hello World 2');  
  17.                 }
  18.                 if (wartosc == 2)
  19.                 {
  20.                     form.elements[kwota[1]].style.display='block';
  21. 					document.write('Hello World 3');                 }
  22.                 if (wartosc == 3)
  23.                 {
  24.                     form.elements[kwota[1]].style.display='block';
  25. 					document.write('Hello World 4'); 
  26.                 }
  27.      }
  28.  
  29. //	 	document.write('Hello World'); 
  30.  
  31. </script>
  32.  
  33. <body onload="refresh()" >
  34.  
  35. <form id="formularz" action="rejestracja&amp;weryfikacja=1.html" method="POST">
  36. 		<select class="main" name="nacja" tabindex="1" onchange="return f1(1)">
  37. 			<option value="1">Opcja 1</option>
  38. 			<option value="2">Opcja 2</option>   	
  39. 			<option value="3">Opcja 3</option>
  40. 			<option value="4">Opcja 4</option>
  41. 			<option value="5">Opcja 5</option>
  42. 		</select>
  43.  
  44. 		<select class="main" name="profesja" tabindex="2" onchange="return f2(2)">Profesja
  45. 			<option value="1">Myśliwy</option>
  46. 			<option value="2">Barbarzyńca</option>  	
  47. 			<option value="3">Zabójca</option>
  48. 			<option value="4">Wojownik</option>
  49. 			<option value="5">Złodziej</option>
  50. 		</select>
  51. </form>
  52. <table class="main" style="width: 50%;">
  53. <tbody>
  54. <tr align="center"> 
  55. 	<td class="name" colspan="7"><span class="bold"></span></td>
  56. </tr>
  57. <tr align="center"> 
  58. 	<td class="name"></td>
  59. 	<td class="name"><span class="bold">Siła:</span></td>
  60. 	<td class="name"><span class="bold">Atak:</span></td>
  61. 	<td class="name"><span class="bold">Życie:</span></td>
  62. 	<td class="name"><span class="bold">Obrona:</span></td>
  63. 	<td class="name"><span class="bold">Charyzma:</span></td>
  64. 	<td class="name"><span class="bold">Zwinność:</span></td>
  65. </tr>
  66. <tr align="center"> 
  67. 	<td class="name"><span class="bold_c">Nazwa 1</span></td>
  68. 	<td class="alpha"><span class="bold">Wartość</span></td>
  69. 	<td class="alpha"><span class="bold">Wartość</span></td>
  70. 	<td class="alpha"><span class="bold">Wartość</span></td>
  71. 	<td class="alpha"><span class="bold">Wartość</span></td>
  72. 	<td class="alpha"><span class="bold">Wartość</span></td>
  73. 	<td class="alpha"><span class="bold">Wartość</span></td>
  74. </tr> 
  75. <tr align="center"> 
  76. 	<td class="name"><span class="bold_c">Nazwa 2</span></td>
  77. 	<td class="alpha"><span class="bold">Wartość</span></td>
  78. 	<td class="alpha"><span class="bold">Wartość</span></td>
  79. 	<td class="alpha"><span class="bold">Wartość</span></td>
  80. 	<td class="alpha"><span class="bold">Wartość</span></td>
  81. 	<td class="alpha"><span class="bold">Wartość</span></td>
  82. 	<td class="alpha"><span class="bold">Wartość</span></td>
  83. </tr> 
  84. </tbody>
  85. </table>
  86.  
  87. </body>
[HTML] pobierz, plaintext
ixpack
30.01.2011, 22:25:05
No ok... ja też na JS się nie znam... Ale polecam jquery oraz przeanalizuj ten kodzik - sam niedawno napisałem i nie wiem czy to jest super, ale działa... A jak PEAR mówi - da się to zrobić inaczej... Polecam próbować winksmiley.jpg

ten plik 'jquery-1.4.4.min.js' jest niezbędny do działania... Z resztą - poczytaj o jQuery - alternatywa dla takich jak my - nie umiejących js :/

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Tytuł</title>
  6.  
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  8.  
  9. <script language="javascript" type="text/javascript">
  10. $(document).ready(function() {
  11. 	$('#select_one').change(function() {
  12. 		switch ($('#select_one option:selected').val()) {
  13. 			case '':
  14. 				$('#info').text('');
  15. 			break;
  16. 			default:
  17. 				$('#info').html('Cool - wybrałeś: ' + $('#select_one option:selected').val() + ' - normalnie super!');
  18. 			break;
  19. 		}
  20. 	});
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <select id="select_one" name="select_one">
  26.   <option value="">Coś wybierz</option>
  27.   <option value="a">Opcja a</option>
  28.   <option value="b">Opcja b</option>
  29.   <option value="c">Opcja c</option>
  30. </select>
  31.  
  32. <div id="info"> </div>
  33. </body>
  34. </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.