Блог старого компьютера

Блог старого компьютера


Главная PHP Зависимый select на ajax

Зависимый select на ajax

17.06.2013 11:43 Администратор PHP
Печать PDF

Довольно часто необходимо сделать формы которые зависят друг от друга. Например выбираешь регион, а во втором поле появляется список городов для этого региона, или же выбираешь марку автомобиля, а в втором списке подгружаются необходимые модели для этой марки. Код не мой половину взял с какого то сайта довольно давно. Но думаю чтоб все это не забалось и не пришло все писать с нуля размещу тут пример.

Для реализации данного метода нам понадобятся 2 файла. В первом файле размещаем сами зависимые селекты, в другом размещаем код который будет генерироват список в зависимости от выбранного  региона.

 

Файл с формами и c js:

<script>
function loadCity(select){
//alert(select);
var citySelect = $('select[name="model"]');

// послыаем AJAX запрос, который вернёт список городов для выбранной области
 $.getJSON('index.php', {action:'getMod', region:select.value}, function(cityList){
citySelect.html(''); // очищаем список городов

// заполняем список городов новыми пришедшими данными
$.each(cityList, function(i){
citySelect.append('<option value="' + i + '">' + this + '</option>');
});
});
}
</script>


<select name="mark" onchange="loadCity(this)">
 <option value="1">Выберите марку</option>
 <option value="2">ВАЗ</option>
 <option value="3">ЗАЗ</option>
 <option value="4">ГАЗ</option>
....
</select>

<select name="model">
<option>Выберите модель</option>
</select>

 Второй файл который будет вызывать аякс при смене значения селекта

if (isset($_GET['action']) && $_GET['action'] == 'getMod'){
 if (isset($mod)){
 echo json_encode($mod); 
}
else{
 echo json_encode(array('Выберите марку'));
}
exit;
}

В данном файле $mod это массив с городами. Массив я думаю вы сами в состоянии получить либо из базы либо из файла.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?
 

Все материалы раздела