Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][PHP]Jak dodać 3 listę zaleźną
saviola15
post 3.07.2013, 09:57:37
Post #1





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 6.09.2012

Ostrzeżenie: (0%)
-----

Witam, po kliknięciu "nie wiem" pojawiają się dwie listy zaleźne a chciałbym dodać jeszcze jedną... Jak to zrobić?
link -> http://pneumaticon.pl/show/

index.php

[PHP] pobierz, plaintext 
  1. <html>
  2. <head><title></title>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="select.js"></script>
  5. <script>
  6. function showMe (it, box) {
  7.   var vis = (box.checked) ? "block" : "none";
  8.   document.getElementById(it).style.display = vis;
  9. }
  10. </script>
  11.  
  12. </head>
  13. <body>
  14. <input type="checkbox" name="c1" onclick="showMe('div1', this)">Nie wiem
  15. <div id="div1" style="display:none">
  16. <form action="select.php" id="formularz" action="post">
  17.  
  18. 	<fieldset>
  19. 		<legend>Wyliczenie siłownika</legend>
  20. 		Ciśnienie
  21. 		<select id="kategorie">
  22. 			<option value="1">0,3 bar</option>
  23. 			<option value="2">0,4 bar</option>
  24. 			<option value="3">0,5 bar</option>
  25. 			<option value="4">0,6 bar</option>
  26. 		</select>
  27. 		Teoretyczna siła pchająca:  
  28. 		</fieldset>
  29. 	</form>
  30.  
  31. </div>
  32.  
  33. </body>
  34. </html>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. //select.js
  2. //skrypt będzie uruchamiany gdy strona się całkowicie załaduje
  3. $(document).ready(function() {
  4.  
  5.     //przypisanie akcji wywołania dodatkowej listy do zdarzenia typu change
  6.     $('#kategorie').live('change', function()
  7.  
  8. 	{
  9.         var id = $(this).val();
  10.  
  11.         //adres url do pliku PHP z kodem generującym dane w formacie JSON
  12.         var url = 'select.php?id='+id;
  13.  
  14.         //jeśli istnieje już select-lista o id: podkategorie, to usuń ją
  15.         if($('#podkategorie').length>0)
  16.             $('#podkategorie').remove();
  17.  
  18.  
  19.  
  20.         //metoda pobierająca dane JSON z podanego adresu w zmiennej url
  21.         $.getJSON(
  22.             url,
  23.             function(data){
  24.  
  25.                 //tworzymy nową, pustą listę select o id: podkategorie i ją dołączamy do formularza
  26.                 select = '<select id="podkategorie"></select>';
  27.                 $('#formularz fieldset').append(select);
  28.                 var lista = $('#podkategorie');
  29.  
  30.  
  31.  
  32.  
  33.                 //ukrywamy listę. Potrzebne to będzie do uzyskania animacji pojawienia się elementu na stronie
  34.                 lista.hide();
  35.  
  36.                 //generowanie kolejnych opcji listy
  37.                 $.each(data, function(key, val){
  38.                     var option = $('<option/>');
  39.                     option.attr('value', key)
  40.                           .html(val)
  41.                           .appendTo(lista);
  42.                 });
  43.  
  44.                 //animacja pojawienia się elementu na stronie
  45.                 lista.show('scale', 500);
  46.             },
  47.             'json'
  48.         );
  49.     })
  50. })
[PHP] pobierz, plaintext

plik z php 

[PHP] pobierz, plaintext 
  1. <?
  2.  
  3. if(!empty($_GET['id'])) {
  4.     $id = $_GET['id'];
  5.     switch($id) {
  6.         case 1:
  7. $tab = array(
  8. '11'=>'3 kg',
  9. '12'=>'6 kg',
  10. '13'=>'9 kg',
  11. '14'=>'14 kg',
  12. '15'=>'24 kg',
  13. );
  14. echo json_encode($tab);
  15. break;
  16. case 2:
  17. $tab = array(
  18. '21'=>'4 kg',
  19. '22'=>'8 kg',
  20. '23'=>'12 kg',
  21. '24'=>'19 kg',
  22. '25'=>'32 kg',
  23.  
  24. );
  25. $tab = array(
  26. '21'=>'5 kg',
  27. '22'=>'8 kg',
  28. '23'=>'9 kg',
  29. '24'=>'10 kg',
  30. '25'=>'11 kg',
  31.  
  32. );
  33. echo json_encode($tab);
  34. break;
  35. case 3:
  36. $tab = array(
  37. '31'=>'5 kg',
  38. '32'=>'10 kg',
  39. '33'=>'15 kg',
  40. '34'=>'24 kg',
  41.  
  42.  
  43. );
  44. echo json_encode($tab);
  45. break;
  46.         case 4:
  47.  
  48. 		   $tab = array(
  49.  
  50. 				'41'=>'6 kg',
  51.                 '42'=>'12 kg',
  52.                 '43'=>'18 kg',
  53. 				'44'=>'29 kg',
  54.             );
  55.             echo json_encode($tab);
  56.             break;
  57.  
  58.     }
  59. }
  60.  
  61. ?>
[PHP] pobierz, plaintext


A może z tego kodu coś można wykombinować:

[PHP] pobierz, plaintext 
  1. <script type="text/javascript" charset="utf-8">
  2. 		$(function(){
  3. 			$("select#ctlJob").change(function(){
  4. 				$.getJSON("test2.php",{id: $(this).val()}, function(j){
  5. 					var options = '';
  6. 					for (var i = 0; i < j.length; i++) {
  7. 						options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
  8. 					}
  9. 					$("#ctlPerson").html(options);
  10. 					$('#ctlPerson option:first').attr('selected', 'selected');
  11. 				})
  12. 			})			
  13. 		})
  14. 		</script>
  15. 	</head>
  16. 	<body>
  17. 		<form action="test2.php">
  18.  
  19. 		<select id="ctlJob">
  20. 			<option value="1">Manager</option>
  21. 			<option value="2">Lead Dev</option>
  22. 			<option value="3">Developer</option>
  23. 		</select>
  24. 		<select id="ctlPerson">
  25. 			<option value="1">Mark</option>
  26. 			<option value="2">Andy</option>
  27. 			<option value="3">Richard</option>
  28. 			</select>
  29.  
  30. 		</form>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <?php
  2. if ($_GET['id'] == 1) {
  3.   echo <<<HERE_DOC
  4.     [ {"optionValue": 0, "optionDisplay": "Mark"}, {"optionValue":1, "optionDisplay": "Andy"}, {"optionValue":2, "optionDisplay": "Richard"}]
  5.  
  6. HERE_DOC;
  7. } else if ($_GET['id'] == 2) {
  8.   echo <<<HERE_DOC
  9.     [{"optionValue":10, "optionDisplay": "Remy"}, {"optionValue":11, "optionDisplay": "Arif"}, {"optionValue":12, "optionDisplay": "JC"}]
  10. HERE_DOC;
  11. } else if ($_GET['id'] == 3) {
  12.   echo <<<HERE_DOC
  13.     [{"optionValue":20, "optionDisplay": "Aidan"}, {"optionValue":21, "optionDisplay":"Russell"}]
  14. HERE_DOC;
  15. }
  16. ?>
[PHP] pobierz, plaintext


http://pneumaticon.pl/show/test.php

Ten post edytował saviola15 3.07.2013, 08:58:29
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 12.06.2025 - 22:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn