Using JavaScript to implement the linkage of the drop-down list

When designing the user registration page, there are often information such as the place of origin to fill in. To fill in this information, you usually select the country->province->city->town.

This article mainly tells you that when the content in the first drop-down list is selected, the content in the second drop-down list also changes (for example: when you select Jiangxi in the first drop-down list, the second one The drop-down list will show cities such as Chenzhou in Nanchang; when you select Fujian in the first drop-down list, the second drop-down list shows cities such as Xiamen in Fuzhou.)

Only JavaScript The implementation does not use any background language.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title> linkage list drop-down list</title>
    <form action="" method="post" role="form" name="form1">
       <div align="center">
            <h1>Linkage of drop-down list</h1>
            Province: <select name="province" id="province" onchange="linkage1() ">
            <option value="0">Select a large class</option>
            <option value="1">Jiangxi</option>
            <option value="2">Guangdong</option>
            <option value="3">Fujian</option>
            <option value="4">Yunnan</option>
            <option value="5">Hubei</option>
            City: <select name="city" id="city" ">
                    <option value="">--Select city</option>
<script type="text/javascript">
     Var city = [
        ["Nanchang", "Zhangzhou"],
        ["Guangzhou", "Shenzhen"],
        ["Fuzhou", "Xiamen"],
        ["Dali", "Namu"",
        ["Wuhan", "Wuchang"]
    Function linkage1() {
        / / Get the object of the province drop-down box
        Const sltProvince = document.form1.province;
        / / Get the object of the city drop-down box
        Const sltCity =;
        / / Get the city array of the corresponding province
        Const provinceCity = city[sltProvince.selectedIndex - 1];
        / / Clear the city drop-down box, leaving only the prompt option

        / / Fill the value of the city array into the city drop-down box
        For(let i=0; i<provinceCity.length; i++){
            sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);