link -> http://pneumaticon.pl/show/
index.php
<html> <head><title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="select.js"></script> <script> function showMe (it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; } </script> </head> <body> <input type="checkbox" name="c1" onclick="showMe('div1', this)">Nie wiem <div id="div1" style="display:none"> <form action="select.php" id="formularz" action="post"> <fieldset> <legend>Wyliczenie siłownika</legend> Ciśnienie <select id="kategorie"> <option value="1">0,3 bar</option> <option value="2">0,4 bar</option> <option value="3">0,5 bar</option> <option value="4">0,6 bar</option> </select> Teoretyczna siła pchająca: </fieldset> </form> </div> </body> </html>
//select.js //skrypt będzie uruchamiany gdy strona się całkowicie załaduje $(document).ready(function() { //przypisanie akcji wywołania dodatkowej listy do zdarzenia typu change $('#kategorie').live('change', function() { var id = $(this).val(); //adres url do pliku PHP z kodem generującym dane w formacie JSON var url = 'select.php?id='+id; //jeśli istnieje już select-lista o id: podkategorie, to usuń ją if($('#podkategorie').length>0) $('#podkategorie').remove(); //metoda pobierająca dane JSON z podanego adresu w zmiennej url $.getJSON( url, function(data){ //tworzymy nową, pustą listę select o id: podkategorie i ją dołączamy do formularza select = '<select id="podkategorie"></select>'; $('#formularz fieldset').append(select); var lista = $('#podkategorie'); //ukrywamy listę. Potrzebne to będzie do uzyskania animacji pojawienia się elementu na stronie lista.hide(); //generowanie kolejnych opcji listy var option = $('<option/>'); .html(val) .appendTo(lista); }); //animacja pojawienia się elementu na stronie lista.show('scale', 500); }, 'json' ); }) })
plik z php
<? $id = $_GET['id']; switch($id) { case 1: '11'=>'3 kg', '12'=>'6 kg', '13'=>'9 kg', '14'=>'14 kg', '15'=>'24 kg', ); break; case 2: '21'=>'4 kg', '22'=>'8 kg', '23'=>'12 kg', '24'=>'19 kg', '25'=>'32 kg', ); '21'=>'5 kg', '22'=>'8 kg', '23'=>'9 kg', '24'=>'10 kg', '25'=>'11 kg', ); break; case 3: '31'=>'5 kg', '32'=>'10 kg', '33'=>'15 kg', '34'=>'24 kg', ); break; case 4: '41'=>'6 kg', '42'=>'12 kg', '43'=>'18 kg', '44'=>'29 kg', ); break; } } ?>
A może z tego kodu coś można wykombinować:
<script type="text/javascript" charset="utf-8"> $(function(){ $("select#ctlJob").change(function(){ $.getJSON("test2.php",{id: $(this).val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; } $("#ctlPerson").html(options); $('#ctlPerson option:first').attr('selected', 'selected'); }) }) }) </script> </head> <body> <form action="test2.php"> <select id="ctlJob"> <option value="1">Manager</option> <option value="2">Lead Dev</option> <option value="3">Developer</option> </select> <select id="ctlPerson"> <option value="1">Mark</option> <option value="2">Andy</option> <option value="3">Richard</option> </select> </form>
<?php if ($_GET['id'] == 1) { echo <<<HERE_DOC [ {"optionValue": 0, "optionDisplay": "Mark"}, {"optionValue":1, "optionDisplay": "Andy"}, {"optionValue":2, "optionDisplay": "Richard"}] HERE_DOC; } else if ($_GET['id'] == 2) { echo <<<HERE_DOC [{"optionValue":10, "optionDisplay": "Remy"}, {"optionValue":11, "optionDisplay": "Arif"}, {"optionValue":12, "optionDisplay": "JC"}] HERE_DOC; } else if ($_GET['id'] == 3) { echo <<<HERE_DOC [{"optionValue":20, "optionDisplay": "Aidan"}, {"optionValue":21, "optionDisplay":"Russell"}] HERE_DOC; } ?>
http://pneumaticon.pl/show/test.php