index.html: Code: <html> <head> <title>3 Selects</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(document).ready (function () { $.post ('select.php', {'act': 'countries'}, function (data) { $("#select-1").html (""); $("#select-1").append ('<option class="select">Select...</option>'); for (var i in data) $("#select-1").append ("<option class=\"country\" value=\"" + data[i] + "\">" + data[i] + "</option>"); }, 'json'); $("#select-1").change (function () { $("#select-2").html (""); var country = $(this).val (); $.post ('select.php', {'act': 'cities', 'country': country}, function (data) { $("#select-2").append ('<option class="select">Select...</option>'); for (var i in data) $("#select-2").append ("<option class=\"city\" value=\"" + data[i] + "\">" + data[i] + "</option>"); }, 'json') }); $("#select-2").change (function () { $("#select-3").html (""); var country = $("#select-1").val (); var city = $("#select-2").val (); $.post ('select.php', {'act': 'categories', 'country': country, 'city': city}, function (data) { $("#select-3").append ('<option class="select">Select...</option>'); for (var i in data) $("#select-3").append ("<option class=\"cat\" value=\"" + data[i] + "\">" + data[i] + "</option>"); }, 'json'); }); }); </script> <style type="text/css"> .country { color: green; } .city { color: magenta; } .cat { color: red; } </style> </head> <body> Choose your country: <select id="select-1"></select><br /> Choose your city: <select id="select-2"></select><br /> Choose your category: <select id="select-3"></select> </body> </html> select.php: PHP: <?php $arr = array ( 'USA' => array ( 'Washington' => array ('WA01', 'WA02', 'WA03'), 'Dallas' => array ('DA01', 'DA02', 'DA03'), 'NewYork' => array ('NY01', 'NY02', 'NY03') ), 'France' => array ( 'Paris' => array ('PA01', 'PA02', 'PA03'), 'Lyon' => array ('LY01', 'LY02', 'LY03'), 'Rouen' => array ('RO01', 'RO02', 'RO03') ), 'Russia' => array ( 'Moscow' => array ('MO01', 'MO02', 'MO03'), 'Peterburg' => array ('PE01', 'PE02', 'PE03'), 'Chita' => array ('CH01', 'CH02', 'CH03') ) ); if ($_POST['act'] === 'countries') { echo json_encode (array_keys ($arr)); } if ($_POST['act'] === 'cities') { echo json_encode (array_keys ($arr[$_POST['country']])); } if ($_POST['act'] === 'categories') { echo json_encode ($arr[$_POST['country']][$_POST['city']]); } ?>
Вот это битва была ) 15 чертей из фриланса бились в попытке решить задачю и только 2 решили почти одновременно чисто на жквэри. Остальные тоже молодцы. Но что удевляло пишут ах.. щас 10 мин будет готово. Потом говориле без пхп не обойтись ну в итоге 2 умудрились это сделать. за что и была награда одному и второму не денежно но все же .. попал в список програмистов
Привет ! А с этим кодом кто поможет ? Select.html Code: <html> <head> <script> var url = "select.php"; var what = "SetLinguaggi(req.responseText)"; function GetLinguaggi(Categoria) { InviaDati("categoria="+Categoria); } function SetLinguaggi(Linguaggi) { var linguaggioBox = document.getElementById("linguaggio"); linguaggioBox.options.length = 0; if(Linguaggi != "") { var arrLinguaggi = Linguaggi.split(","); for(i = 0; i < arrLinguaggi.length; i++) { if(arrLinguaggi[i] != "") { linguaggioBox.options[linguaggioBox.options.length] = new Option(arrLinguaggi[i], arrLinguaggi[i]); } } } } </script> <script src="ajax.js" type="text/javascript"></script> </head> <body> Categoria:<br> <select onChange="GetLinguaggi(this.options[this.selectedIndex].text)" id="categoria"> <option value=""></option> <option>programmazione</option> <option>scripting</option></select> <br>Linguaggio:<br> <select id="linguaggio"></select> </body> </html> ajax.js Code: function InviaDati(data) { // istanziamo l'oggetto XMLHttpRequest if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = PocessaDati; req.open('POST', url, true); req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); req.send(data); } // controlliamo la versione di ActiveX else if (window.ActiveXObject) { req = new ActiveXObject('Microsoft.XMLHTTP') if (req) { req.onreadystatechange = PocessaDati; req.open('POST', url, true); req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); req.send(data); } } } function PocessaDati() { // monitoriamo lo stato dell'invio if (req.readyState == 4) { // restituiamo lo stato della richiesta if (req.status == 200) { eval(what); }else{ alert('Problema nella gestione dei dati: ' + req.responseText); } } } Скрипт работает так берез из select.php слова и подставляет их в теги option. Возможно сделать так что бы он вставлян не слова а сами теги т.е <option value=123>City01</option> т.е такого типа. А то но просто подставляет слова в оптион а мне нужно что бы вставлял в селект полные теги
Вообщем мне при выборе 1 селекта нужно вставить файл =текстовый или пхп = с тегами в виде <option value =123>City01</option> Мне сказали что Аякс должен помочь.. или ПХП но с перезагрузкой страницы... что мне не подходит