Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Lista rozwjana z pojawiajaca sie opcją
Forum PHP.pl > Forum > PHP
kosiew
25.06.2013, 15:30:44
Witam

Potrzebuje małej pomocy. Chciałbym stworzyć listę rozwijaną gdzie po wyborze którejś z opcji pojawiał by się obok tekst. Np: biały czerwony czarny. O ile ze stworzeniem takiej rozwijanej listy nie było by problemu to nie mam pomysł jak do danej opcji z listy dopasować jeden z trzech tekstów. Proszę o jakieś wskazówki np pod jakim hasłem szukac tego w googlach.

Dziękuje z góry za zainteresowanie.
Sephirus
25.06.2013, 15:47:25
Musisz sobie utworzyć listę/tablicę w JS, w której umieścisz teksty przypisane do danego "value" elementu OPTION w SELECT'cie. Na przykład tak:

click
styryl
26.06.2013, 11:19:31
Zapoznaj się z tym:

http://www.appelsiini.net/projects/chained
kosiew
26.06.2013, 20:25:58
Poczytałem i mam coś takiego. Nie wiem jak ostatni select zamienic w np pole input z odpowiednią treścią. 

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. 	<head>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. 	</head>
  7.  
  8. 	<body>
  9. 		<div style="width: 500px; height:500px; margin: 0 auto;">
  10. 			<div>
  11. 				<div>
  12. 					<form>
  13. 						<table>
  14. 							<tr>
  15. 								<td> Marka </td>
  16.  
  17. 								<td>
  18. 								<select id="marka" name="marka">
  19. 									<option value="">--</option>
  20. 									<option value="audi">Audi</option>
  21. 									<option value="bmw">BMW</option>
  22. 								</select></td>
  23.  
  24. 								<td> Model </td>
  25.  
  26. 								<td>
  27. 								<select id="model" name="model">
  28.  
  29. 									<option value="">--</option>
  30.  
  31. 									<option value="a1" class="audi">Audi A1</option>
  32. 									<option value="a3" class="audi">Audi A3</option>
  33. 									<option value="a4" class="audi">Audi A4</option>
  34. 									<option value="a5" class="audi">Audi A5</option>
  35. 									<option value="a6" class="audi">Audi A6</option>
  36. 									<option value="a7" class="audi">Audi A7</option>
  37. 									<option value="a8" class="audi">Audi A8</option>
  38. 									<option value="q3" class="audi">Audi Q3</option>
  39. 									<option value="q5" class="audi">Audi Q5</option>
  40. 									<option value="q7" class="audi">Audi Q7</option>
  41. 									<option value="tt" class="audi">Audi TT </option>
  42.  
  43. 									<option value="series-1" class="bmw">1 series</option>
  44. 									<option value="series-3" class="bmw">3 series</option>
  45. 									<option value="series-5" class="bmw">5 series</option>
  46. 									<option value="series-6" class="bmw">6 series</option>
  47. 									<option value="series-7" class="bmw">7 series</option>
  48. 									<option value="series-X" class="bmw">X series</option>
  49.  
  50. 								</select></td>
  51.  
  52. 								<td>
  53. 									wielkość
  54. 								</td>
  55. 								<td>
  56. 															<select id="size" name="size">
  57.  
  58. 							<option value="">--</option>
  59. 							<option value="małe" class="a1 tt">małe</option>
  60. 							<option value="średnie" class="series-1 series-3 series-5 series-6 series-7 a3">średnie</option>
  61. 							<option value="duże" class="series-2 a4 a5 a6 a7 a8">duże</option>
  62. 							<option value="SUV" class="series-X q3 q5 q7">SUV</option>
  63.  
  64. 						</select>
  65. 								</td>
  66. 							</tr>
  67. 						</table>
  68.  
  69.  
  70.  
  71.  
  72.  
  73. 					</form>
  74. 				</div>
  75. 			</div>
  76. 		</div>
  77.  
  78. 		</div>
  79. 		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  80. 		<script src="jquery.chained.js?v=0.9.4" type="text/javascript" charset="utf-8"></script>
  81. 		<script src="jquery.chained.remote.js?v=0.9.4" type="text/javascript" charset="utf-8"></script>
  82. 		<script type="text/javascript" charset="utf-8">
  83. 			$(function() {
  84.  
  85. 				/* For jquery.chained.js */
  86. 				$("#model").chained("#marka");
  87. 				$("#size").chained("#model");
  88.  
  89. 				/* Show button after each pulldown has a value. */
  90. 				$("#size").bind("change", function(event) {
  91. 					if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
  92. 						$("#button").fadeIn();
  93. 					} else {
  94. 						$("#button").hide();
  95. 					}
  96. 				});
  97.  
  98. 			});
  99. 		</script>
  100. 	</body>
  101. </html>
  102.  
[PHP] pobierz, plaintext


styryl
27.06.2013, 07:22:43
Opisz dokładnie co chcesz zrobić? Chcesz zamienić ostatni SELECT w INPUT?
kosiew
27.06.2013, 13:23:44
Chce żeby było tak: W pierwszym select wybieram markę w drugim model i po wybraniu danej opcji z drugiego select pojawie się tekst do niej przypisany.
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.