javascrip语言怎么实现两个下拉框的联动？小组和部门怎么联动，可以从数据库获取么？

问题描述：

答

标签嵌套，具体的百度搜一下js组件的联动显示

答

可以从数据库中获取，数据库里需要有主表和从表，两个表之间有关联关系（即根据主表中字段可查出从表中与之有关联的数据），加载页面的时候需要先查询出主表数据显示在下拉框中，下拉框select标签应有onchange="xxx(id)"属性，每次改变主下拉框时访问xxx方法，根据id再去数据库中查询有关联的从表的数据回显在从下来框中

答

嵌套一个函数试试，我用的jQuery做的选项卡就实现了，你看一下这篇博文的下拉框选项卡案例https://blog.csdn.net/ZZQHELLO2018/article/details/82118453

答

要代码吗我有一个小例子，数据改成后台获取就OK了。jQuery+Ajax

 <!DOCTYPE html>
<html>
  <head>
    <title>二级联动.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">


       //json  (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式

       var areas = [
        //一级区域
        {id:1,name:"北京"},
        {id:2,name:"河北省"},
        {id:3,name:"山西省"},

        //二级区域
        {id:3,name:"北京市",parentId:1},

        {id:4,name:"石家庄市",parentId:2},
        {id:5,name:"廊坊市",parentId:2},
        {id:6,name:"衡水市",parentId:2},

        {id:7,name:"太原市",parentId:3},
        {id:8,name:"运城市",parentId:3},
        {id:9,name:"临汾市",parentId:3},
       ];


       window.onload = function(){

       //初始化一级区域
       var pro = document.getElementById("pro");

       //迭代行政区

       for(var i = 0; i < areas.length; i++){

           var parentId = areas[i].parentId;
           //如果parentId不存在
           if(!parentId){


              // pro.options.add(new Option(text,value));

               pro.options.add(new Option(areas[i].name,areas[i].id));

           }
       }


       };

       function changeArea(value){

           //清空二级区域
            //选中市
           var city = document.getElementById("city");

           //只保留第一项,其它选项清空
           city.options.length = 1;

           //遍历jsonarray

           for(var i = 0; i < areas.length; i++){

               var parentId = areas[i].parentId;

               //如果选择的区域id等于当前对象的id
               if(parentId == value){

                   city.options.add(new Option(areas[i].name,areas[i].id));

               }
           }
       }

    </script>

  </head>

  <body>
    <select id="pro" onchange="changeArea(this.value);">
       <option value="">请选择省</option>
    </select>

    <select id="city" >
       <option value="">请选择市</option>
    </select>
  </body>
</html>

javascrip语言怎么实现两个下拉框的联动？小组和部门怎么联动，可以从数据库获取么？

相关推荐