ajax实现无刷新省市县三级联动

2024-09-01 08:28:00

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下

效果图：

实现代码：

1、html：

<html><head>  <title></title>    <style type="text/css">    select    {      width: 150px;    }  </style>  <script src="js/Jquery1.7.js" type="text/javascript"></script>  <script type="text/javascript">    $(function () {      $.ajax({        type: "post",        contentType: "application/json",        url: "WebService1.asmx/GetProvince",        data: "{}",        success: function (result) {          var stroption = '';          for (var i = 0; i < result.d.length; i++) {            stroption += '<option value=' + result.d[i].provinceID + '>';            stroption += result.d[i].provincename;            stroption += '</option>';          }          $('#seprovince').append(stroption);        }      })      $('#seprovince').change(function () {       $('#secity option:gt(0)').remove();        $('#searea option:gt(0)').remove();        $.ajax({          type: "post",          contentType: "application/json",          url: "WebService1.asmx/GetCItyByPro",          data: "{proid:'" + $(this).val() + "'}",          success: function (result) {            var strocity = '';            for (var i = 0; i < result.d.length; i++) {              strocity += '<option value=' + result.d[i].cityID + '>';              strocity += result.d[i].cityname;              strocity += '</option>';            }            $('#secity').append(strocity);          }        })      })      $('#secity').change(function () {        $('#searea option:gt(0)').remove();        $.ajax({          type: "post",          contentType: "application/json",          url: "WebService1.asmx/GetAreaByCity",          data: "{cityid:'" + $(this).val() + "'}",          success: function (result) {            var stroarea = '';            for (var i = 0; i < result.d.length; i++) {              stroarea += '<option value=' + result.d[i].areaID + '>';              stroarea += result.d[i].areaname;              stroarea += '</option>';            }            $('#searea').append(stroarea);          }        })      })    })  </script></head><body> <table>    <tr>      <td>        用户名      </td>      <td>        <input id="Text1" type="text" />      </td>    </tr>    <tr>      <td>        密码      </td>      <td>        <input id="Text2" type="text" />      </td>    </tr>    <tr>      <td>        确认密码      </td>      <td>        <input id="Text3" type="text" />      </td>    </tr>    <tr>      <td>        邮箱      </td>      <td>        <input id="Text4" type="text" />      </td>    </tr>    <tr>      <td>        地址      </td>      <td>        <select id="seprovince">          <option>--请选择--</option>        </select>        省        <select id="secity">          <option>--请选择--</option>        </select>市        <select id="searea">          <option>--请选择--</option>        </select>县      </td>    </tr>  </table></body></html>

上一篇：Ajax实现异步用户名验证功能

下一篇：通过构造AJAX参数实现表单元素JSON相互转换

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注