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

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

5个回答

标签嵌套,具体的百度搜一下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>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

2
javascrip语言具体怎么思路把一个listbox和一个combo中的数据进行结合?
1
简单javascript的问题请教,怎么利用javascrip这个工具实现表达式求值运算?
2
javascrip动态设置html5页面顶部的跑马灯提示的文字,要动态设置的怎么写?
2
h5怎么实现javascrip语言判断div的高度如何实现自适应的高度?怎么用代码实现页面判断?
3
怎么利用javascrip语言实现ajax方式的判断?ajax使用的语句的形式怎么写?
2
请问怎么在javascrip语言里使用箭头界面?箭头界面调用什么语句可以实现?
1
求问如何使javascrip语言可以读取用户的剪贴板,自动添加页面的链接到word剪贴板?
1
javascrip语言怎么实现判断剪贴板上的内容是否和网页输入的不同?如果不同就改变?
2
javascrip语言恩么实现将不同长度的文本分类在不同的列表框中?具体的实现的方式?
2
javascrip怎么实现汉子转拼音的,输入汉字转换成拼音字母,着急
3
javascrip语言怎么把一个字符串向前移动一位,比如hello变成elloh
1
javascrip语言怎么在页面上自动循环播放mp3音乐?
1
在做一个关于工程管理APP,希望实现的功能是可以在手机端查看自己所处的施工位置
2
在SSH框架中Action接受不到jquery_Ajax的data数据
1
求大佬帮忙看看,在SSH框架中Action接受不到jquery_Ajax的data数据,该怎么办啊?
3
在写一个处理算法,想看看大家思路,可以用代码表示最好,任意语言均可
4
html中script的引用路径问题求解答
4
vue弹出的模态框中的表单还存在上次的数据怎么办?
0
跨域传递数据,Java、web