使用js实现四级联动

最新推荐文章于 2023-03-22 00:54:02 发布

chunlei6499

最新推荐文章于 2023-03-22 00:54:02 发布

阅读量1.1k

点赞数

文章标签： json javascript java ViewUI

原文链接：https://my.oschina.net/u/3055497/blog/1820846

版权

<!DOCTYPE html>
<html>

       <select id="id04" name="name04">
           <option value='-1'>请选择</option>
       </select>
   </body>
   <script>
       var arr =
       [
           [
               [
                   ["大写", "A-O", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O"],
                   ["大写", "P-Z", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
               ],
               [
                   ["小写", "a-o", "a", "b"],
                   ["小写", "p-z", "p", "q"]
               ]
           ],
           [
               [
                   ["阿拉伯数字", "个位数", 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                   ["阿拉伯数字", "两位数", 10, 11, 12, 13, 14, 15, 16,17, 18, 19]
               ],
               [
                   ["中文数字", "个位数","零", "一", "二", "三", "四"],
                   ["中文数字", "两位数", "十", "十一", "十二", "十三", "十四"]
               ]
           ]
       ];

       function method01(s01) {
           //当点击选择了s01的任何一个时，重置所有的选项为请选择
           var s02 = document.getElementById("id02");
           s02.innerHTML = "<option value='-1'>请选择</option>";
           var s03 = document.getElementById("id03");
           s03.innerHTML = "<option value='-1'>请选择</option>"
           var s04 = document.getElementById("id04");
           s04.innerHTML = "<option value='-1'>请选择</option>"
           if(s01.value != -1) {
               //根据s01对象的value值，来确定是选择了数字还是字母
               var arr2 = arr[s01.value]; //从四维数组中获取到一个三维数组

               for(var i = 0; i < arr2.length; i++) {
                   //遍历并得到里面的二维数组
                   var arr3 = arr2[i];
                   //获取到二维数组里面的第一个数组。得到一个一维数组
                   var arr4 = arr3[0];
                   //取一维数组的第一个值作为option内容
                   var option1 = document.createElement("option");
                   //给option添加索引。后面需要根据索引确定选值
                   option1.value = i;
                   //只获取arr4的第一个元素，添加到选项中，此时的第一个元素无非就是广州、深圳。如果选云南，那么就是昆明、玉溪
                   var text1 = document.createTextNode(arr4[0]);
                   option1.appendChild(text1);
                   s02.appendChild(option1);
               }
           }
       }

       function method02(s02){
           var s01 = document.getElementById("id01");
           var s03 = document.getElementById("id03");
           s03.innerHTML = "<option value='-1'>请选择</option>"
           var s04 = document.getElementById("id04");
           s04.innerHTML = "<option value='-1'>请选择</option>"

           if(s02.value != -1){ //为什么要判断不等于-1，因为方法调用到此步了，如果等于-1，说明value是-1。那么，不添加元素。只显示请选择
               var arr2 = arr[s01.value];
               var arr3 = arr2[s02.value];
               for(var i = 0; i < arr3.length; i++){
                   var arr4 = arr3[i];
                   //取一维数组的第一个值作为option内容
                   var option2 = document.createElement("option");
                   //给option添加索引在后续可以如同当前一样进行行根据索引来确定选值
                   option2.value = i;
                   var text2 = document.createTextNode(arr4[1]);
                   option2.appendChild(text2);
                   s03.appendChild(option2);
               }
           }
       }

       function method03(s03){
           var s01 = document.getElementById("id01");
           var s02 = document.getElementById("id02");
           var s04 = document.getElementById("id04");
           s04.innerHTML = "<option value='-1'>请选择</option>"

           if(s03.value != -1){
               var arr2 = arr[s01.value];
               var arr3 = arr2[s02.value];
               var arr4 = arr3[s03.value];
               for(var i = 2; i < arr4.length; i++){
                   var option3 = document.createElement("option");
                   //给option添加索引
                   option3.value = i - 2;
                   var text3 = document.createTextNode(arr4[i]);
                   option3.appendChild(text3);
                   s04.appendChild(option3);
               }
           }
       }
   </script>