Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> masukkan judul di sini </iteme>
<type skrip = "Teks/JavaScript">
// Inisialisasi array 2D untuk menyimpan item daftar kota
var cities = [
["Anqing", "hefei", "tongcheng"],
["Shijiazhuang", "Baoding", "Tangshan"],
["Zhengzhou", "Luoyang", "Kaifeng"]
];
// Saat memilih provinsi, hubungi metode untuk menambahkan kota
fungsi provinceChanged (sel) {
// peringatan ("Panjang Pilih"+sel.options.length);
// sel sebenarnya adalah objek terpilih
// Transfer koleksi opsi dan temukan opsi yang dipilih
untuk (var x = 0; x <sel.options.length; x ++)
{
var opt = sel.Options [x];
if (opt.poelected)
{
// Tambahkan opsi ke kota yang dipilih
AddCityToselect (x)
}
}
}
// Tambahkan item kota di bawah provinsi yang dipilih ke kota Pilih
fungsi addCityToselect (x) {
// Temukan kota yang sesuai dari array dua dimensi
var city = kota [x-1];
var cityselect = document.geteLementById ("select_city");
/*============================ Hapus elemen yang sudah ada di node ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ==============================================================
Ketika metode ini disebut kedua atau ke -n, node yang ditambahkan sebelumnya telah ditambahkan ke objek Pilih Kota, sehingga dihapus.
Ide 1: Pilih Removechild () dari objek Pilih, sehingga kata simpul dapat dihapus melalui loop traversal.
Ide 2: Setel select.Options.length = 1 langsung untuk mencapai efek yang sama.
*/
// Atur panjang opsi di bawah objek pilih kota ke 1
CitySelect.Options.Length = 1;
// Atur panjang koleksi opsi dan hapus
//cityselect.options.length=1;
untuk (var x = 0; x <city.length; x ++)
{
// Buat objek Node Elemen
var optionName = document.createElement ("option");
// Atur konten tampilan untuk opsi
optionName.innerHtml = City [x];
// Tambahkan opsi yang dibuat untuk dipilih
CitySelect.AppendChild (OptionName);
/*
Di tempat ini, tambahkan semua kota di bawah provinsi tertentu ke objek CitySelect
Ketika provinsi kedua dipilih untuk kedua kalinya, semua kota di bawah provinsi kedua akan ditambahkan ke
Di bawah Node CitySelect. Efek ini salah. Jadi, sebelum setiap penambahan,
Hapus isinya di bawah node CitySelect. Tampilan berikutnya:
============================ Hapus elemen yang sudah ada di simpul =================
*/
}
}
</script>
</head>
<body>
<Pilih Onchange = "ProvinceChanged (this);">
<!-Arti dari ini: mengacu pada objek pilih yang dipanggil dengan provinsi (ini), dan dalam metode ini
Lewati objek itu sendiri sebagai parameter untuk beroperasi di atasnya. ->
<pection> Pilih provinsi </potion>
<pection> anhui </pection>
<pection> hebei </pection>
<option> henan </pection>
</pilih>
<Pilih id = "select_city">
<pection> Pilih City </pect>
</pilih>
</body>
</html>