Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX]Podwójny dropdown - problem
Forum PHP.pl > Forum > XML, AJAX
Piotrbaz
15.09.2012, 19:44:03
Problem zapewne jest banalny.
w3schools.com ma na swojej stronie gotowca: http://www.w3schools.com/PHP/php_ajax_database.asp

CODE

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>



Skrypt pobiera wartość z select i ładuje getuser.php z odpowiednim parametrem. Pragnę uzyskać taki sam efekt, ale z dwoma listami select z zastrzeżeniem, że załądowanie do DIV nastąpi po wybraniu dopiero drugiej wartości (z drugiego selecta). Co należy zmienić ? (oprócz oczywistych zmian w pliku php, dodania drugiego selecta i dodaniu drugiego argumentu w funkcji ShowUser.)

Próbówalem robić "na czuja", ale niestety bez znajomości JS nie zawalczę sam. Jednak to nie to samo co PHP wstydnis.gif
Arcioch
19.09.2012, 09:27:30
Chcesz zrobić dwa zależne selekty i po wybraniu danych z drugiego będzie dopiero ładować jakieś dane? Czy te dane mają być ładowane z MySQL czy z jakiejś tablicy z php i czy to może być napisane w jQuery a nie w czystym js. Jak tak to chętnie napiszę i wstawię rozwiązanie.
Piotrbaz
19.09.2012, 13:23:29
Dokladnie, najpierw wybieram pierwszy, potem drugi i dopiero ładuję dane. Wartości pobierane są z bazy danych MySQL, połączenie i odpowiednie zapytania są zdefiniowane w odpowiednich klasach. Teraz tylko kwestia pobrania tych dwóch wartości z selectow i przekazania ich do funkcji php bez przeladowania strony ofc. Gotowiec z w3schools po prostu wydawał mi się najprostszy jaki może być, dlatego chciałem akurat ten zmodyfikować. Oczywiście może być jQuery.

P.S. Na forum w3schools założyłem podobny temat i poradził ktoś, żeby wpisać w selecty jakieś "id", a następnie w funkcji zdefiniować dwie zmienne w stylu:
var user = document.getElementById("users").value;

Tak czy siak nie chodzi. Link do tematu: http://w3schools.invisionzone.com/index.php?showtopic=45098 tongue.gif
Arcioch
20.09.2012, 14:35:27
Napisany gotowiec na tablicach bo zaraz będzie szef w pracy i nie chce mi się robić tabelek i zapytań do MySql wink.gif Kod musisz sobie troszkę zmodyfikować ale działa prawidłowo wink.gif Składa się z dwóch plików. Jeden to plik w którym odbierane są dane z posta wysłane jsonem i wysyłany odpowiedni wygląd. Drugi plik to html z jquery który to obiera wink.gif Musisz sobie to zabezpieczyć. Jeżeli masz jakieś pytania to śmiało.

Plik pierwszy (u mnie o nazwie selecty.php).

[HTML] pobierz, plaintext 
  1. <?php
  2. 	$kategorie = array('Dyrekcja', 'Nauczyciele', 'Inni pracownicy');
  3. ?>
  4.  
  5.  
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9. <meta charset="UTF-8">
  10. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  11.  
  12. <style>
  13. div.first_select{
  14. display: block;
  15. float: left;
  16. width: 200px;
  17. }
  18.  
  19. div.second_select{
  20. display: block;
  21. float: left;
  22. width: 200px;
  23. }
  24.  
  25. select{
  26. width: 150px;
  27. text-align: center;
  28. }
  29.  
  30. div.table{
  31. display: block;
  32. float: left;
  33. clear: both;
  34. margin: 100px 0px 0px 0px;
  35. }
  36. </style>
  37.  
  38. <script>
  39.  
  40. $(function(){
  41. 	// Tu masz funckje odpowiedzialna za pierwszego select
  42.  
  43. 	$('#kategorie').change(function() {
  44.  
  45. 		var kategoria = $('select#kategorie option:selected').val();
  46.  
  47. 		$(this).find('option[value="none"]').remove();
  48.  
  49. 		if(kategoria != 'none'){
  50. 			$.ajax({
  51. 				type: "POST",
  52. 				url: "post.php",
  53. 				data: "kategoria=" + kategoria , 
  54. 				cache: false,
  55. 				success: function(data){
  56. 						var json = $.parseJSON(data);
  57. 						$('.second_select').html(json);
  58. 				}				
  59. 			});
  60. 		}
  61.  
  62. 	});	
  63.  
  64. 	$(document.body).on('change', '#podkategoria', function() {
  65. 		var podkategoria = $('select#podkategoria option:selected').val();
  66. 		var kategoria = $('select#kategorie option:selected').val();
  67. 		if(podkategoria != 'none'){
  68. 			$.ajax({
  69. 				type: "POST",
  70. 				url: "post.php",
  71. 				data: "podkategoria=" + podkategoria + "&kat=" + kategoria, 
  72. 				cache: false,
  73. 				success: function(data){
  74. 						var json = $.parseJSON(data);
  75. 						$('.table').html(json);
  76. 				}				
  77. 			});
  78. 		}
  79. 	});
  80.  
  81.  
  82.  
  83. });
  84.  
  85. </script>
  86.  
  87. </head>
  88. <body>
  89.  
  90.  
  91.  
  92. <div class="first_select">
  93. 	<select id="kategorie" name="kategorie">
  94. 		<option value="none">Wybierz Kategorie</option>
  95. 		<? foreach($kategorie as $key => $k):?>
  96. 				<option value="<?= $key?>"><?= $k ?></option>
  97. 		<? endforeach; ?>
  98. 	</select>
  99. </div>
  100.  
  101. <div class="second_select">
  102.  
  103. </div>
  104.  
  105. <div class="table">
  106. </div>
  107.  
  108. </body>
  109. </html>
[HTML] pobierz, plaintext


Plik drugi (u mnie o nazwie post.php)

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3.  
  4. 	$kategorie = array('Dyrekcja', 'Nauczyciele','Inni pracownicy');
  5.  
  6. 	$podkategorie = array(array('Dyrektor', 'Wicedyrektor'),
  7. 						array('Historia', 'Polski', 'Angielski'),
  8. 						array('Pani od sklepiku', 'Pani sprzataczka')
  9. 					);
  10.  
  11. 	$osoby = array(array(array('Arcio', 'Soszin', 'Bobo'), array('Soszin', 'Bobo')),
  12. 					);	
  13.  
  14. 	if(isset($_POST['kategoria'])){
  15.  
  16. 		$select = '<select id="podkategoria" name="podkategoria">';
  17. 		$select .= '<option value="none">Wybierz podkategorie</option>';
  18. 		foreach($podkategorie as $key => $p){
  19. 			if($key == $_POST['kategoria']){
  20. 				foreach($p as $key2 => $pp){
  21. 					$select .= '<option value="'.$key2.'">'.$pp.'</option>';
  22. 				}
  23. 				break;
  24. 			}
  25. 		}
  26.  
  27. 		$select .= '</select>';
  28.  
  29. 		echo json_encode($select);
  30. 	}	
  31.  
  32.  
  33. 	if(isset($_POST['podkategoria']) && isset($_POST['kat'])){
  34.  
  35. 		$string = '';
  36.  
  37. 		foreach($osoby as $key => $p){
  38. 			if($key == $_POST['kat']){
  39. 				foreach($p as $key2 => $pp){
  40. 					if($key2 == $_POST['podkategoria']){
  41. 						foreach($pp as $osoba){
  42. 						 $string .= '|'. $osoba;
  43. 						}
  44. 						break;
  45. 					}		
  46. 				}
  47. 				break;
  48. 			}
  49. 		}	
  50. 		echo json_encode($string);
  51. 	}
  52.  
  53. ?>
  54.  
[PHP] pobierz, plaintext


Całość spakowana tutaj wink.gif
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.