ajax三级联动实现代码

最新推荐文章于 2022-11-27 11:08:33 发布

益达36

最新推荐文章于 2022-11-27 11:08:33 发布

阅读量128

点赞数

文章标签： ajax linq javascript

本文链接：https://blog.csdn.net/weixin_68076562/article/details/125363174

版权

<html >
<head>
  <title>三级联动</title>
  <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
</head>
<script type="text/javascript">
  $(function () {
    //省
    $.getJSON(
            "${pageContext.servletContext.contextPath}/GetprovinceServlet", function (arrJson) {
      $(arrJson).each(function (i, objJson) {
        $("#prov").append($("<option value='" + objJson.id + "'>" + objJson.addName + "</option>"));
      });
    });
    //市
    $("#prov").change(function () {
      $.getJSON("${pageContext.servletContext.contextPath}/GetprovinceServlet",
              {"parentId": this.value}, function (arrJson) {
                $("#city option:gt(0)").remove();
                $(arrJson).each(function (i, objJson) {
                  $("#city").append($("<option value='" + objJson.id + "'>" + objJson.addName + "</option>"))
                })
              })
    })
    //区
    $("#city").change(function () {
      $.getJSON("${pageContext.servletContext.contextPath}/GetprovinceServlet",
              {"parentId": this.value}, function (arrJson) {
                $("#region option:gt(0)").remove();
                $(arrJson).each(function (i, objJson) {
                  $("#region").append($("<option value='" + objJson.id + "'>" + objJson.addName + "</option>"))
                })
              })
    })
  });
</script>
<body>
省：  <select id="prov">
  <option>====请选择====</option>
</select>
市：  <select id="city">
  <option>====请选择====</option>
</select>
区：  <select id="region">
  <option>====请选择====</option>
</select>
</body>
</html>