Home > Article > Web Front-end > JavaScript implements three-level cascading special effects

JavaScript implements three-level cascading special effects

小云云Original: 2017-12-09 14:05:181683browse

This article mainly introduces JavaScript to implement three-level cascading special effects. Select the provincial capital and the corresponding county drop-down box will appear. At the same time, the city drop-down box will change. It has certain reference value. Interested friends can refer to it. I hope it can help. to everyone.

The example in this article shares the specific code for realizing three-level cascading special effects in js for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

<!-- 实现效果：选择省会出现相应的县下拉框，同时市的下拉框改变-->
    <script type="application/javascript">  

　　　　//二维数组存放市的信息
      var shi =[["丽水市","杭州市"],["新乡","郑州"]]; 
    　　//三维数组存放县的信息   

　　　var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
      //所选的省值

　　　　var proIndex = 0;
      function sgc(){
        //获得所选择的省的下拉框值

　　　　 var pro = document.getElementById("sheng");
       //获得市的下拉框 

　　　　var cit = document.getElementById("shi");
       //将省的value与市的一维数组下标所对应 

　　　　proIndex = pro.value-1;

　　　　//清空市下拉框中原有的值
        cit.options.length = 1;
        //通过for循环往下拉框中添加市的信息
        for(var i = 0;i < shi[proIndex].length;i++){
          var op = document.createElement("option");
          var citName = document.createTextNode(shi[proIndex][i]);
          op.value = i;
          op.appendChild(citName);
          cit.appendChild(op);          
        }      
      }

　　　//市的值改变后改变县的值
      function sic(){
        var are = document.getElementById("xian");
        var cit = document.getElementById("shi");
        are.options.length = 1;

　　　　//通过proIndex获得所选的省的值作为县的数组的一维数组下标，通过cit.value作为县数组的二维数组下标，遍历获得数组值
        for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
          var op = document.createElement("option");
          var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
          op.value = i;
          op.appendChild(areName);
          are.appendChild(op);
        }
      }
    </script>

　　//onchange():控件的value值改变后调用方法
    <select id = "sheng" onchange = "sgc();">
      <option>----省份---</option>
      <option value = "1">浙江省</option>
      <option value = "2">河南省</option>
    </select>
    <select id = "shi" onchange="sic();">
      <option>---市区---</option>
    </select>
    <select id = "xian" >
      <option>---县区---</option>
    </select>
  </body>
</html>

Related recommendations:

javascript+jQuery to achieve 360 boot time display effect

Scope and block-level scope in Javascript

JavaScript realizes the production of special effects for selected boxes

The above is the detailed content of JavaScript implements three-level cascading special effects. 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：JavaScript+jQuery realizes 360 boot time display effectNext article：JavaScript+jQuery realizes 360 boot time display effect

See more

JavaScript implements three-level cascading special effects

Related articles