JavaScript implements three-level cascading special effects example sharing-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JavaScript implements three-level cascading special effects example sharing

Jan 19, 2018 pm 02:40 PM

javascript js Example

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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;

&lt;!-- 实现效果：选择省会出现相应的县下拉框，同时市的下拉框改变--&gt;
    &lt;script type=&quot;application/javascript&quot;&gt;  

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

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

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

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

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

　　　　proIndex = pro.value-1;

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

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

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

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

Copy after login

Related recommendations:

Ajax implements detailed explanation of three-level cascade of provinces and municipalities

Detailed explanation of iframe production of three-level cascading menu

php implements three-level cascading drop-down box multi-select drop-down box drop-down box plug-in drop-down box generation

The above is the detailed content of JavaScript implements three-level cascading special effects example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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