Всем привет! Т.к. в JS я не шарю (а в Ajax тем более) и нужен он бывает мне редко (но метко), то пришлось для своих нужд списать в интернете скрипт и адаптировать под себя, в котором два селекта (поля со списком). В зависимости от выбора в первом селекте, выводится определенный список во втором. В представленном случае это список стран (в первом селекте) и городов в них (во втором селекте). Всего три файла: index.php Код (Text): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Связанные с помощью ajax списки</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> </head> <body> <script> $(document).ready(function () { $('#country_id').change(function () { var country_id = $(this).val(); if (country_id == '0') { $('#region_id').html('<option>- выберите город -</option>'); $('#region_id').attr('disabled', true); return(false); } $('#region_id').attr('disabled', true); $('#region_id').html('<option>загрузка...</option>'); var url = 'get_regions.php'; $.get( url, "country_id=" + country_id, function (result) { if (result.type == 'error') { alert('error'); return(false); } else { var options = ''; $(result.regions).each(function() { options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('title') + '</option>'; }); $('#region_id').html(options); $('#region_id').attr('disabled', false); } }, "json" ); }); }); </script> <form action="#" method="get"> Страна: <select name="country_id" id="country_id"> <? include "../mass.php"; foreach ($country as $key => $value) { // if ($_GET[country_id]==$key) $selected="selected"; else $selected=""; echo "<option value=$key $selected>".iconv("Windows-1251", "UTF-8", $value)."</option>"; } ?> </select> Город: <select name="region_id" id="region_id" disabled="disabled"> <option value="0">- выберите город -</option> </select> </form> </body> </html> get_regions.php Код (Text): <?php $country_id = @intval($_GET['country_id']); include "../mass.php"; foreach ($city[$country_id] as $key => $value) { $regions[] = array('id'=>$key, 'title'=>iconv("Windows-1251", "UTF-8", $value)); } $result = array('type'=>'success', 'regions'=>$regions); /** Упаковываем данные с помощью JSON */ print json_encode($result); //print_r ($regions); ?> и файл с массивом данных mass.php Код (Text): $country[1]="Россия"; $country[2]="Абхазия"; $country[3]="Австрия"; $country[4]="Азербайджан"; ... $city[1][1]="Москва"; $city[1][2]="Санкт-Петербург"; ... Все замечательно и стабильно работает, но есть еще одно требование которое необходимо реализовать. При загрузке страницы по ссылке вида inde.php?country_id=1&city_id=2 в первом селекте должно быть выбрано Россия, а во втором Санкт-Петербург. Как это реализовать не знаю. Выбор страны реализован, а вот как быть с выбором города? События change ведь в этом случае не происходит. Не знаю... Помогите кто может реализовать задачу! Заранее благодарен!
Написать js функцию, которая при загрузке документа вызывает загрузку городов во второй список точно так, как это делает анонимная функции в обработчике change. У тебя сейчас так Код (Text): $('#country_id').change(function () { var country_id = $(this).val(); А сделай отдельной функцией, например Код (Text): function change(country_id){ //и тут код по загрузке городов во второй список } $('#country_id').change(function () { change($(this).val()); } $(function() {//сработает по загрузке документа change(2);//2 выводить через php или парсить адрес с помощью jQuery }); Как-то так.
YSandro спасибо тебе большое! Вот что у меня получилось (точнее не получилось) Код (Text): <script> function change(country_id) { //и тут код по загрузке городов во второй список if (country_id == '0') { $('#region_id').html('<option>- выберите город -</option>'); $('#region_id').attr('disabled', true); return(false); } $('#region_id').attr('disabled', true); $('#region_id').html('<option>загрузка...</option>'); var url = 'get_regions.php'; $.get( url, "country_id=" + country_id, function (result) { if (result.type == 'error') { alert('error'); return(false); } else { var options = ''; $(result.regions).each(function() { options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('title') + '</option>'; }); $('#region_id').html(options); $('#region_id').attr('disabled', false); } }, "json" ); }; $('#country_id').change(function () { change($(this).val()); } $(function() {//сработает по загрузке документа change(2);//2 выводить через php или парсить адрес с помощью jQuery }); </script> Список городов даже не активный (с надписью - выберите город -), то есть country_id == '0' Что сделано не так?
Скобки не на месте. Код (Text): <script> function change(country_id){ //и тут код по загрузке городов во второй список if (country_id == '0') { $('#region_id').html('<option>- выберите город -</option>'); $('#region_id').attr('disabled', true); return(false); } $('#region_id').attr('disabled', true); $('#region_id').html('<option>загрузка...</option>'); var url = 'get_regions.php'; $.get( url, "country_id=" + country_id, function (result) { if (result.type == 'error') { alert('error'); return(false); } else { var options = ''; $(result.regions).each(function() { options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('title') + '</option>'; }); $('#region_id').html(options); $('#region_id').attr('disabled', false); } }, "json" ); }; $(function() {//сработает по загрузке документа $('#country_id').change(function () { change($(this).val()); }); change(2);//2 выводить через php или парсить адрес с помощью jQuery }); </script>
Ура! Получилось!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Уффффффффффффф.... пришлось попотеть )) Кому надо ловите код: Код (Text): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Связанные с помощью ajax списки</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> </head> <body> <? if (!$_GET['country_id'] || !$_GET['region_id']) { $_GET['country_id']=0; $_GET['region_id']=0; } echo" <script> function change(country_id,region_id){ if (country_id == '0') { $('#region_id').html('<option>- выберите страну -</option>'); $('#region_id').attr('disabled', true); return(false); } $('#region_id').attr('disabled', true); $('#region_id').html('<option>загрузка...</option>'); $.get( 'get_regions.php?country_id='+country_id+'®ion_id='+region_id, function (result) { if (result.type == 'error') { alert('error'); return(false); } else { var options = ''; $(result.regions).each(function() { options += '<option value=\"' + $(this).attr('id') + '\" ' + $(this).attr('sel') + '>' + $(this).attr('title') + '</option>'; }); $('#region_id').html(options); $('#region_id').attr('disabled', false); } }, \"json\" ); }; $(function() { $('#country_id').change(function () { change($('#country_id').val(),0); }); change(".$_GET['country_id'].",".$_GET['region_id'].");//2 выводить через php или парсить адрес с помощью jQuery }); </script>"; ?> <form action="#" method="get"> Страна: <select name="country_id" id="country_id"> <? include "../cargo_mass.php"; foreach ($country as $key => $value) { if ($_GET['country_id']==$key) $selected="selected"; else $selected=""; echo "<option value=$key $selected>".iconv("Windows-1251", "UTF-8", $value)."</option>"; } ?> </select> Город: <select name="region_id" id="region_id" disabled="disabled"> </select> </form> </body> </html> Код (Text): <?php $country_id = @intval($_GET['country_id']); $region_id = @intval($_GET['region_id']); include "../cargo_mass.php"; foreach ($city[$country_id] as $key => $value) { if ($region_id==$key) $sel="selected"; else $sel=""; $regions[] = array('id'=>$key, 'sel'=>$sel, 'title'=>iconv("Windows-1251", "UTF-8", $value)); } $result = array('type'=>'success', 'regions'=>$regions); print json_encode($result); ?> Для меня это подвиг! Спасибо огромное YSandro за помощь!!!