Zastanawiam się jak zrobić w formularzu aby były dwie listy rozwijane, z czego jeżeli w pierwszej wybierze się przykładowo jakieś województwo to w drugiej liście zostaną miasta przypisane tylko do tego województwa. Jeżeli zaś nie wybierze się żadnego województwa to w drugiej liście będą wszystkie miasta. Posklejałem kod, który po wybraniu jednej opcji pokazuje kolejne pola.
Taki kod mam:
<html>
<head>
<meta charset="UTF-8">
<style>
.stufftochoose select:last-of-type, .stufftochoose select:nth-child(2){
display:none
}
</style>
<script>
(function(){
"use strict";
function makeOptions(elements){
var str = "";
elements.forEach(function(text) {
var option = document.createElement("option");
option.textContent = text;
option.value = text;
str += option.outerHTML;
});
return str;
}
var district = {
"(brak oddziału)": makeOptions(["(puste)"]),
"Dolnośląskie": makeOptions(["(puste)", "js_dol_powiat1", "js_dol_powiat2"]),
"Kujawsko-Pomorskie": makeOptions(["(puste)", "js_kuj_powiat1", "js_kuj_powiat2"]),
"Lubelskie": makeOptions(["(puste)", "js_lub_powiat1", "js_lub_powiat2"])
};
var city = {
"(puste)": makeOptions(["(puste)"]),
"js_dol_powiat1": makeOptions(["(puste)", "dol_p1_Miasto 1", "dol_p1_Miasto 2"]),
"js_dol_powiat2": makeOptions(["(puste)", "dol_p2_Miasto 1", "dol_p2_Miasto 2"]),
"js_kuj_powiat1": makeOptions(["(puste)", "kuj_p1_Miasto 1", "kuj_p1_Miasto 2", "kuj_p1_Miasto 3"]),
"js_kuj_powiat2": makeOptions(["(puste)", "kuj_p2_Miasto 1", "kuj_p2_Miasto 2", "kuj_p2_Miasto 3", "kuj_p2_Miasto 4"]),
"js_lub_powiat1": makeOptions(["(puste)", "lub_p1_Miasto 1", "lub_p1_Miasto 2"]),
"js_lub_powiat2": makeOptions(["(puste)", "lub_p2_Miasto 1", "lub_p2_Miasto 2", "lub_p2_Miasto 3", "lub_p2_Miasto 4"])
};
(Object.freeze || Object)(city);
(Object.freeze || Object)(district);
var empty = "";
function change(e, arr, len){
var elem = e.target;
var indexOf = arr.indexOf(elem);
if(indexOf === -1)
indexOf = arr.indexOf(elem = e.target.parentElement);
if(elem.value !== "" && elem.value !== empty){
if(indexOf !== len){
elem.nextElementSibling.style.display = "inline";
if(indexOf === 0){
elem.nextElementSibling.innerHTML = district[e.target.value];
elem.nextElementSibling.nextElementSibling.style.display = "none";
}
else if(indexOf === 1)
elem.nextElementSibling.innerHTML = city[e.target.value];
}
} else {
var cached = elem;
while(cached){
cached = cached.nextElementSibling;
if(cached)
cached.style.display = "none";
}
}
}
document.addEventListener("DOMContentLoaded", function(){
Array.prototype.forEach.call(document.querySelectorAll(".stufftochoose"), function(elem) {
var arr = Array.prototype.slice.call(elem.querySelectorAll("select"));
var len = arr.length - 1;
arr.forEach(function(elem, n) {
if(n <= 1)
elem.addEventListener("click", function func(e){
change(e, arr, len);
elem.removeEventListener("click", func);
});
elem.addEventListener("change", function(e){
change(e, arr, len);
});
});
});
}, false);
})();
</script>
</head>
<body>
<table class="form-table stufftochoose">
<tr><th><label for="company_province">1 wybierz</label></th>
<td><select id="company_province" name="company_province" value="<?php echo $company_province; ?>">
<?php
if($company_province== null)
{
echo '<option value=""';
echo $company_province== '' ? 'selected="selected"' : '';
echo '>Wybierz...</option>';
echo '<option value="Dolnośląskie"';
echo $company_province== 'Dolnośląskie' ? 'selected="selected"' : '';
echo '>Dolnośląskie</option>';
echo '<option value="Kujawsko-Pomorskie"';
echo $company_province== 'Kujawsko-Pomorskie' ? 'selected="selected"' : '';
echo '>Kujawsko-Pomorskie</option>';
echo '<option value="Lubelskie"';
echo $company_province== 'Lubelskie' ? 'selected="selected"' : '';
echo '>Lubelskie</option>';
}
else
{
echo '<option value="Dolnośląskie"';
echo $company_province== 'Dolnośląskie' ? 'selected="selected"' : '';
echo '>Dolnośląskie</option>';
echo '<option value="Kujawsko-Pomorskie"';
echo $company_province== 'Kujawsko-Pomorskie' ? 'selected="selected"' : '';
echo '>Kujawsko-Pomorskie</option>';
echo '<option value="Lubelskie"';
echo $company_province== 'Lubelskie' ? 'selected="selected"' : '';
echo '>Lubelskie</option>';
}
?>
</select>
<select name="company_district" value="<?php echo $company_district; ?>" id="company_district">
</select>
<select name="company_city" value="<?php echo $company_city; ?>" id="company_city">
</select></td> </tr>
</table>
</body>
</html>