search

Home  >  Article  >  Web Front-end  >  How to control secondary linkage with JS

How to control secondary linkage with JS

小云云
小云云Original
2018-03-12 16:13:331939browse

This article mainly shares with you how to control secondary linkage with JS. There is a drop-down list on the registration page. The drop-down list displays province information, and there is another following list. Select a province and add the cities under this province. Listed, I hope this article can help everyone.

1. Requirements

There is a drop-down list on the registration page. The drop-down list displays province information, and there is another following list. Select a province and add the cities under this province. List.

2. Technical analysis

Array

  • Syntax:

    new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
    var arr4=["aa","bb"];

  • Common attributes:

    length

  • Note:

    数组是可变的
数组可以存放任意值

  • Common methods: (understand)

    存放值:对内容的操作
    pop():弹 最后一个
    push():插入 到最后
    shift():删除第一个
    unshift():插入到首位
打印数组:
    join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
    concat():连接两个或更多的数组，并返回结果。
对结构的操作:
    sort();排序
    reverse();反转

3. Step analysis

Step 1: Determine the event: onchange.
Step 2: Obtain the changed province value.
Step 3: Compare whether the value of the province is equal to the value defined in the array. If they are equal, obtain the value corresponding to this province. Array of all cities.
Step 4: Create an option element and add the value in the array to the option element.
Step 5: Add option to the second drop-down list.

4. Code implementation

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            // 定义二维数组:
            var cities = new Array(4);
            cities[0] = new Array("长春市","吉林市","松原市","延边市");
            cities[1] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
            cities[2] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
            cities[3] = new Array("南京市","苏州市","扬州市","无锡市");            function selectCity(val){
                // alert(val);
                var citySel = document.getElementById("city");                // 清除原有的option:
                citySel.options.length = 0;                // 遍历数组：
                for(var i=0;i<cities.length;i++){                    if(val == i){                        // 遍历数组：
                        for(var j = 0 ;j<cities[i].length;j++){                            // alert(cities[i][j]);
                            // 创建option元素：
                            var opEl = document.createElement("option");                            // 创建文本元素：
                            var textNo = document.createTextNode(cities[i][j]);                            // 将文本添加到option中．
                            opEl.appendChild(textNo);                            // 将option添加到第二个下拉列表中
                            citySel.appendChild(opEl);
                        }
                    }
                }
            }        </script>
    </head>
    <body>
        <select id="province" onchange="selectCity(this.value)">
            <option value="">-请选择-</option>
            <option value="0">吉林省</option>
            <option value="1">山东省</option>
            <option value="2">河北省</option>
            <option value="3">江苏省</option>
        </select>
        <select id="city">
        </select>
    </body></html>

5. Implementation effect

How to control secondary linkage with JS

Beginners, I hope you can leave a message to correct me if I have any shortcomings.

Related recommendations:

js implements Select secondary linkage instance sharing in HTML

realizes jq secondary linkage on the registration page

Native js secondary linkage

The above is the detailed content of How to control secondary linkage with JS. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js anchor scrolling example sharingNext article：js anchor scrolling example sharing

Related articles

See more