<form id="changeSelect">
Выберите страну
<select name="country">
<option class="hide">
</option>
</select>
Выберите город
<select name="city">
<option class="hide">
</option>
</select>
Выберите улицу
<select name="street">
<option class="hide">
</option>
</select>
</form>
Сначала установим обработчик события изменения значений формы, а потом напишем функцию которая будет отправлять аякс-запрос к БД и вставлять полученные данные в форму:
$(function()
{
$("body").on("change", "select", function()
{
let val = $(this).val(),
name = $(this).attr('name'),
next = $(this).next().attr('name')
if(name != 'street')
{
getSelect({name: name, val: val, next: next})
}
})
getSelect({country: 'all'}) // первая подгрузка стран
})
function getSelect(names)
{
$.ajax(
{
type: "POST",
dataType: "json",
url: "/ajaxController.php",
data:
{
func: "getSelect",
names: names
},
success: function(res)
{
if(names.country == 'all')
{
for($i = 0; $i < res.length; $i++)
{
$("[name=country]").append("<option>"+res[$i][0]+"</option>")
}
}else
{
let elems = '<option class="hide"></option>', next = names.next
for($i = 0; $i < res.length; $i++)
{
elems += "<option>"+res[$i][0]+"</option>"
}
$('[name='+next+']').html(elems)
if(next == 'city')
{
$("[name=street]").html('')
}
}
}
})
}
PHP-функция принимающая запрос:
function getSelect()
{
$names = $_POST['names'];
if(isset($names['country']) && $names['country'] == 'all')
{
$result = $this->query("select distinct `country` from `places` order by `country`"); // query это функция выполняющая всё что нужно с БД
exit(json_encode($result));
}
else
{
$val = $this->escapeStr($names['val']);
$name = $this->escapeStr($names['name']);
if($name == 'country'){
$select = 'city';
}
if($name == 'city'){
$select = 'street';
}
$result = $this->query("select distinct `$select` from `places` where `$name`=? order by `$select`", [$val]);
exit(json_encode($result));
}
}
ajaxSelect.rar