JavaScript-Implementierung der dreistufigen kaskadierenden Spezialeffekt-Beispielfreigabe-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

JavaScript-Implementierung der dreistufigen kaskadierenden Spezialeffekt-Beispielfreigabe

Jan 19, 2018 pm 02:40 PM

javascript js 实例

本文主要介绍了JavaScript实现三级级联特效，选择省会出现相应的县下拉框，同时市的下拉框改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

&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;

Nach dem Login kopieren