jQuery实现级联查询

最新推荐文章于 2021-09-10 12:13:44 发布

傻》n《瓜

最新推荐文章于 2021-09-10 12:13:44 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/weixin_44644871/article/details/116947852

版权

核心代码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8" >
  <title>省市级联查询</title>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">

    $(function (){
      $("#btnload").click(function (){
      //发送一个ajax请求
        $.ajax({
          url:"province",
          dataType:"json",
          success:function (sper){
            $("#province").empty();
            $.each(sper,function (i,n){//遍历json数据
              $("#province").append("<option value='"+n.id+"'>"+n.name+"</option>" );

            })
          }

        })
      } )
      $("#province").change(function (){
      /*  $("#city").empty();
        $.each(function (){
          $("#city").append()
        })*/
        var abc=$("#province>option:selected");
        var city=abc.val();
        $("#city").empty();
        $.get( "city",{proid:city },call,"json")

      })
    })
    call=function (resp){
      $.each(resp,function (i,n){
        $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>" );
      } )
    }


  </script>
</head>
<body>
<center>
  <p>使用ajax实现省市级联查询</p>

  <table border="2">
    <tr>
      <td>省份名称</td>
      <td>
        <select id="province">
          <option value="0">请选择.....</option>
        </select>
      </td>
      <td>
        <input type="button" value="load数据" id="btnload">
      </td>

    </tr>
    <tr>
      <td>城市名称</td>
      <td>
        <select name="" id="city">
          <option value="0">请选择...</option>
        </select>
      </td>
    </tr>
  </table>
</center>
</body>
</html>

在这里插入图片描述

傻》n《瓜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现级联查询

核心代码<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <meta charset="UTF-8" > <title>省市级联查询</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
复制链接

扫一扫