Задумка такая:
В первом селекте - страны
Во втором - города
В третьем - филиалы
* При выборе значения из первого селекта, выскакивает второй( со значением по умолчанию столица страны) и третий(по умолчанию первый филиал из выборки по базе) -
частично реализовал, не заполняется третий селект
* Если выбран пункт во втором селекте, но в этом городе нет филиалов, то третий селект - display:none;. Если перевыбрать город, естественно третий селект тоже обновляется.
Если выбрать московскую область, то во втором селекте сразу заполняется город - Москва, а третий селект так и пустует. Но если выбрать другой город, а потом снова Москва, то третий селект заполнится.
Как это работает сейчас: blogcode.ru/2.php
2.php
function get_country(){
global $db;
$query = "SELECT id, name FROM country";
$res = mysqli_query($db, $query);
return mysqli_fetch_all($res, MYSQLI_ASSOC);
}
?>
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript" src="/js/chained.js"></script>
<select required id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this);dhtmlgoodies_city.style.display='block';dhtmlgoodies_drom.style.display='block'" placeholder="Выберите область" >
<option value="" disabled selected style='display:none;'>Выберите область</option>
<?php $res=get_country();
foreach($res as $key){?>
<option value="<?php echo $key['id']; ?>"><?php echo $key['name']; ?></option>
<?php } ?>
</select>
<select required style="display:none;" id="dhtmlgoodies_city" name="dhtmlgoodies_city" onchange="getDromList(this)">
</select>
<select style="display:none;" id="dhtmlgoodies_drom" name="dhtmlgoodies_drom">
</select>
chained.js
var ajax = new Array();
function getCityList(sel)
{
var countryJS = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryJS.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getcities.php?countryJS='+countryJS; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript JS
}
function getDromList(sel)
{
var cityJS = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_drom').options.length = 0; // Empty city select box
if(cityJS.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getdrom.php?cityJS='+cityJS; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_drom');
eval(ajax[index].response); // Executing the response from Ajax as Javascript JS
}
getcities.php
if(isset($_GET['countryJS'])){
mysqli_set_charset($db, 'utf8') or die("Can't set sharset");
$query = "SELECT region, id, city FROM city where region =".$_GET['countryJS'];
$res = mysqli_query($db, $query);
$res = mysqli_fetch_all($res, MYSQLI_ASSOC);
foreach($res as $key){
echo "obj.options[obj.options.length] = new Option('$key[city]','$key[id]');\n";
}
}
getdrom.php
if(isset($_GET['cityJS'])){
mysqli_set_charset($db, 'utf8') or die("Can't set sharset");
$query = "SELECT city,name, id FROM drom where city =".$_GET['cityJS'];
$res = mysqli_query($db, $query);
$res = mysqli_fetch_all($res, MYSQLI_ASSOC);
foreach($res as $key){
echo "obj.options[obj.options.length] = new Option('$key[name]','$key[id]');\n";
}
}