qq_41843551
鱼在海上飞
2018-06-14 07:57
采纳率: 82.5%
浏览 2.2k
已采纳

下拉框的级联显示怎么做





籍贯:
安徽
//在安徽下有分安徽的省份
江苏

//在江苏下又分江苏的省份

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

14条回答 默认 最新

  • qq_31233833
    qq_31233833 2018-06-14 07:59
    已采纳

    html部分代码为下拉列表添加onchange事件

        <div class="form-group" style="margin-right: 0">
         <label for="inputEmail3" class="col-sm-3 control-label" style="width: 170px; padding-top: 0">制造厂商:</label>
         <div class="col-sm-5">
            <select name="factory" id="select"  class="form-control post_select" onchange="page.change(this.value);">
            <c:forEach items="${list}" var="item" >
                    <option value="${item.manufacturerId}">${item.manufacturerName}</option>
            </c:forEach>
            </select>
        </div>
    </div>


    <div class="form-group" style="margin-right: 0">
        <label for="inputEmail3" class="col-sm-3 control-label" style="width: 170px; padding-top: 0">型号规格:</label>
        <div class="col-sm-5">
            <select name="model" id="model"  class="form-control post_select" >
            </select>
        </div>
    </div>

    jQuery部分代码，还需要在页面初始化的时候就调用该方法加载一遍

    var manufacturerId = $("#select").val();
    page.change(manufacturerId);

    page.change=function(manufacturerId){
    $.ajax({
    url:"${ctx }/psdj/change",
    type:'get',
    async:true,
    cache:false,
    data:{
    "id":manufacturerId
    },
    success:function(data){
    var items = data.model;
    var selectModel = $("#model");
    selectModel.empty();
    if(items!=null){
    for(var i in items){
    var item = items[i];
    selectModel.append(""+item.modelName+"");

                          $("#model").val('${vo.model}');

                  }
              }
              else{
                  selectModel.empty();
              }
          }
    });
}

    如果需要第二个下拉列表回显值，则需要在

    点赞 评论
  • qq_41843551
    鱼在海上飞 2018-06-14 07:58

    图片说明
    比如还要南京里面还要有南京的区，芜湖还有芜湖的下拉框区

    点赞 评论
  • qq_38361634
    爱_LOVE 2018-06-14 08:01

    参考https://www.jb51.net/article/72366.htm

    点赞 评论
  • xcgh
    xcgh 2018-06-14 08:02

    数组或者ajax，都可以，如果是地区的网上有下载的https://www.cnblogs.com/maderlzp/p/7687161.html
    https://www.jb51.net/article/115492.htm

    点赞 评论
  • khs521
    khs521 2018-06-14 08:02

    1，用2个Select ，配合JS脚本实现联动；
    <!DOCTYPE html>



    Insert title here function fn(){ var select=document.getElementById("city"); var c=select.value; var area=document.getElementById("area"); switch(c) { case "jx": area.innerHTML="<option>抚州市</option><option>南昌市</option><option>赣州市</option><option>宜春市</option>"; break; case "gd":area.innerHTML="<option>广州市</option><option>韶关市</option><option>佛山市</option><option>东莞市</option>"; break; case "fj":area.innerHTML="<option>泉州市</option><option>厦门市</option><option>福州市</option><option>漳州市</option>"; break; case "hn":area.innerHTML="<option>长沙市</option><option>湘潭市</option><option>乐昌市</option><option>郴州市</option>"; break; default:alert("error"); } };




    江西
    广东
    福建
    湖南


    抚州市
    南昌市
    赣州市
    宜春市

    点赞 评论
  • zhangxl5232
    zhangxl5232 2018-06-14 08:03

    请参考：https://www.cnblogs.com/shnfg/p/7823603.html

    点赞 评论
  • zzq8001
    zzq8001 2018-06-14 08:20

    好久没写代码了，文字逻辑回答下：
    第一步：写两个select组件，一个命名id为省级select组件，一个命名id为地市级select组件；
    第二步：在省级select 组件中增加onchange事件；
    第三步：在引入的js文件或javascript脚本处编写 onchange调用的事件脚本，在方法体中实现地市级select组件的组装，可组装静态（纯页面文字）的option组件，也可根据Ajax方法组装动态（数据库读取）的option组件。

    点赞 评论
  • w172087242
    little_how 2018-06-14 08:52

    https://blog.csdn.net/w172087242/article/details/51077046
    可以参考一下，里面有个下载demo的，可以直接参考使用

    希望可以帮到你....

    点赞 评论
  • qq_39207713
    refute 2018-06-14 09:02





    <br> function setM(){<br> //利用js代码向下拉框添加选项<br> var sel = document.getElementById(&quot;m&quot;);<br> //循环12次，添加上1-12月份<br> //创建一个option<br> for(var i=1;i&lt;=12;i++){<br> var opt =new Option(i+&quot;月份&quot;,i);//2个参数，第一个是text,value<br> sel.add(opt);<br> }<br> }<br> function setDate(m){<br> console.log(m);<br> //得到该月的日期<br> var date =31;<br> //得到日期下拉框<br> var sel = document.getElementById(&quot;d&quot;);<br> //对日期变量进行遍历<br> for(var i=1;i&lt;=date;i++){<br> var opt = new Option(i+&quot;号&quot;,i);<br> sel.add(opt);<br> }<br> }<br>


    月份：
        </select><br>
    日期：<select id="d"></select>
    <script>
        setM();
        setDate(document.getElementById("m").value)
    </script>
</body>
    点赞 评论
  • qq_39207713
    refute 2018-06-14 09:03
     <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function setM(){
                //利用js代码向下拉框添加选项
                var sel = document.getElementById("m");
                //循环12次，添加上1-12月份
                //创建一个option
                for(var i=1;i<=12;i++){
                    var opt =new Option(i+"月份",i);//2个参数，第一个是text,value
                    sel.add(opt);
                }
            }
            function setDate(m){
                console.log(m);
                //得到该月的日期
                var date =31;
                //得到日期下拉框
                var sel = document.getElementById("d");
                //对日期变量进行遍历
                for(var i=1;i<=date;i++){
                    var opt = new Option(i+"号",i);
                    sel.add(opt);
                }
            }
        </script>
    </head>
    <body>
        月份：<select id="m" onchange="setDate(this.value)">

        </select><br>
        日期：<select id="d"></select>
        <script>
            setM();
            setDate(document.getElementById("m").value)
        </script>
    </body>
</html>
    点赞 评论
  • weixin_38652136
    邪恶八进制 2018-06-14 09:38


    请选择汽车厂商
    宝马
    奥迪
    大众
    点赞 评论
  • qq_38272331
    qq_38272331 2018-06-14 10:45

    https://blog.csdn.net/w172087242/article/details/51077046
    这个demo可以直接参考使用，希望可以帮到你....

    点赞 评论
  • qq_35217751
    qq_35217751 2018-06-14 11:40





    <br> function setM(){<br> //利用js代码向下拉框添加选项<br> var sel = document.getElementById(&quot;m&quot;);<br> //循环12次，添加上1-12月份<br> //创建一个option<br> for(var i=1;i&lt;=12;i++){<br> var opt =new Option(i+&quot;月份&quot;,i);//2个参数，第一个是text,value<br> sel.add(opt);<br> }<br> }<br> function setDate(m){<br> console.log(m);<br> //得到该月的日期<br> var date =31;<br> //得到日期下拉框<br> var sel = document.getElementById(&quot;d&quot;);<br> //对日期变量进行遍历<br> for(var i=1;i&lt;=date;i++){<br> var opt = new Option(i+&quot;号&quot;,i);<br> sel.add(opt);<br> }<br> }<br>


    月份：
        </select><br>
    日期：<select id="d"></select>
    <script>
        setM();
        setDate(document.getElementById("m").value)
    </script>
</body>

    点赞 评论
  • qq_35301188
    元辰辰辰辰辰辰 2018-06-14 13:31

    w3school网站里有，可以参考下

    点赞 评论
提交

相关推荐