下拉框的级联显示怎么做

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

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

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();
              }
          }
    });
}

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

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

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

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

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"); } };

江西
广东
福建
湖南

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

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

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

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

希望可以帮到你....

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

 <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>

请选择汽车厂商
宝马
奥迪
大众

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

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

w3school网站里有，可以参考下