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

  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>


  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. })

plik z php

  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. ?>


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

  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>


  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. ?>


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