Простая трехуровневая связь, сделанная с JavaScript, очень простая и практичная
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> </title>
</head>
<тело>
Провинция:
<select id = "pre" onchange = "chg (this);">
<option value = "-1"> Пожалуйста, выберите </option>
</select>
город:
<select id = "city" onchange = "chg2 (this)";> </select>
округ:
<SELECT ID = "Область"> </select>
</body>
<Скрипт>
// объявить провинцию
var pres = ["Пекин", "Шанхай", "Шандун"]; // напрямую объявлять массив
// заявление города
VAR CITION = [
["Dongcheng", "Changping", "Haidian"],
["Пудун", "Высокая зона"],
["Jinan", "Qingdao"]
];
Области var = [
[
["Dongcheng1", "Dongcheng2", "Dongcheng3"],
["Чангинг 1", "Чангинг 2", "Чангинг 3"],
["Haidian 1", "Haidian 2", "Haidian 3"]
],
[
["Пудун 1", "Пудун 2", "Пудун 3"],
[«Высокая зона 1», «Высокая зона 2», «Высокая зона 3»]
],
[
["Jinan 1", "Jinan 2"],
["Циндао 1", "Циндао 2"]
]
]
// Установить общественный индекс для провинции
var pindex = -1;
var preele = document.getElementbyId ("pre");
var Cityele = document.getElementById ("City");
var QueeEele = document.getElementById ("зона");
// сначала установите сохраненное значение
for (var i = 0; i <pres.length; i ++) {
// объявить опцию. <Option value = "pres [i]"> pres [i] </option>
var op = new Option (pres [i], i);
//Добавить в
preele.options.add (op);
}
Функция chg (obj) {
if (obj.value == -1) {
cityele.options.length = 0;
aevereele.options.length = 0;
}
// Получить значение
var val = obj.value;
pindex = obj.value;
// Получить Ctiry
var cs = города [val];
// Получить область по умолчанию
var as = gain [val] [0];
// сначала очистить рынок
cityele.options.length = 0;
aevereele.options.length = 0;
for (var i = 0; i <cs.length; i ++) {
var op = новая опция (cs [i], i);
cityele.options.add (op);
}
for (var i = 0; i <as.length; i ++) {
var op = новая опция (как [i], i);
aevereele.options.add (op);
}
}
функция chg2 (obj) {
var val = obj.selectedIndex;
var AS = области [pindex] [val];
aevereele.options.length = 0;
for (var i = 0; i <as.length; i ++) {
var op = новая опция (как [i], i);
aevereele.options.add (op);
}
}
</script>
</html>
Приведенное выше содержимое этой статьи, я надеюсь, вам понравится.