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
    点赞 评论
  • 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
    点赞 评论
  • 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网站里有,可以参考下

    点赞 评论

相关推荐