dabocaiqq
dabocaiqq
2018-09-06 15:48
采纳率: 66.6%
浏览 574
已采纳

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • showbo
    已采纳
    点赞 评论
  • ultramanleoking
    止戈uuu 2018-09-07 02:24

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

    点赞 评论
  • qshazi
    土豆_ 2018-09-07 03:09

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

    点赞 评论
  • ZZQHELLO2018
    清平の乐 2018-09-08 06:00

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

    点赞 评论
  • qq_35310633
    smile_zls 2018-09-11 03:14

    要代码吗 我有一个小例子,数据改成后台获取就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>
    
    
    点赞 评论

相关推荐