masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pembangunan JavaScript bagi bahagian hadapan rantaian tiga peringkat

Bahagian ini memperkenalkan kod bahagian hadapan, yang agak mudah, tetapi terdapat juga perkara yang memerlukan perhatian. Label menu lungsur turun

ialah pilih Fungsi label pilihan di bawah label ini ialah:

Elemen pilihan mentakrifkan pilihan (item) dalam senarai juntai bawah. . Elemen pilihan

terletak di dalam elemen pilih. 

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>三级联动</title>
   <style>
*{margin:0;padding:0;}
   </style>
</head>
<body>
<div>
请选择地区：
   <select name="" id="proc" onchange="showCity()">
       <option value="">--请选择省--</option>
   </select>

   <select name="" id="city" onchange="showDist()">
       <option value="">--请选择市--</option>
   </select>

   <select name="" id="dist">
       <option value="">--请选择区--</option>
   </select>
</div>
</body>
</html>

Ini adalah kod bahagian hadapan fungsi. Gayanya agak mudah, dan perkara utama ialah ia dapat merealisasikan fungsi.

Sesetengah orang mungkin tidak faham onchange="showCity()". Apakah ini dan cara menulisnya di sini.

Ini ialah peristiwa klik yang terikat untuk mencetuskan pilihan menu lungsur bandar selepas mengklik untuk memilih wilayah.

Begitu juga, onchange="showDist()" ialah pilihan untuk mencetuskan menu lungsur kawasan itu selepas memilih bandar.

Ini juga dipanggil pertautan Kerana wilayah dan majlis perbandaran mempunyai hubungan tiga peringkat, ia dipanggil pertautan tiga peringkat.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> <style> *{margin:0;padding:0;} </style> </head> <body> <div> 请选择地区： <select name="" id="proc" onchange="showCity()"> <option value="">--请选择省--</option> </select> <select name="" id="city" onchange="showDist()"> <option value="">--请选择市--</option> </select> <select name="" id="dist"> <option value="">--请选择区--</option> </select> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492993 permainan