架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 17105|回复: 3

[Jquery] jquery通过ajax请求数据库进行省市联动

[复制链接]
发表于 2015-8-19 21:09:49 | 显示全部楼层 |阅读模式
因为第一次做这个效果,慢慢做起来,发觉,自己写了许多重复的代码。

现在也没有时间优化,大家凑合着看吧,最后附上压缩包,包括数据库脚本。

另外,附上用纯js写的省市联动代码

利用js实现省市区三级联动菜单
http://www.itsvse.com/thread-2072-1-1.html
(出处: 武汉软件工程职业学院)


  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PlaceInfo.aspx.cs" Inherits="AjaxDemo.PlaceInfo" %>

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <title></title>
  6.     <scrip去掉t src="scrip去掉ts/jquery-1.4.1.min.js" type="text/javascrip去掉t"></scrip去掉t>
  7.     <scrip去掉t type="text/javascrip去掉t">

  8.         //省方法
  9.         function sheng() {
  10.             var $sheng = $("#sheng option:selected").val();
  11.             $.ajax({
  12.                 url: "ajax3.aspx",
  13.                 type: "get",
  14.                 data: "test=x&sheng=" + $sheng,
  15.                 success: function (mesg) {
  16.                     $("#shi").empty();
  17.                     $("#shi").append(mesg);
  18.                     $("#shi option:eq(0)").attr("selected", "selected");
  19.                     var num = $("#shi option").length;
  20.                     if (num > 1) {
  21.                         $("#shi").show();
  22.                     } else {
  23.                         $("#shi").hide();
  24.                     }
  25.                     shi();
  26.                 }
  27.             });
  28.         };
  29.         //市方法
  30.         function shi() {
  31.             var $shi = $("#shi option:selected").val();
  32.             $.ajax({
  33.                 url: "ajax3.aspx",
  34.                 type: "get",
  35.                 data: "test=x&sheng=" + $shi,
  36.                 success: function (mesg) {
  37.                     $("#xian").empty();
  38.                     $("#xian").append(mesg);
  39.                     $("#xian option:eq(0)").attr("selected", "selected");
  40.                 }
  41.             });
  42.         }
  43.         $(function () {

  44.             $.ajax({
  45.                 url: "ajax3.aspx",
  46.                 type: "get",
  47.                 data: "",
  48.                 success: function (mesg) {
  49.                     $("#sheng").append(mesg);
  50.                     $("#sheng option:eq(0)").attr("selected", "selected");
  51.                     sheng();
  52.                     
  53.                 }
  54.             });
  55.             /**测试按钮**/
  56.             $(":button").click(function () {
  57.                 var $a = $("#sheng option:selected").val();
  58.                 alert($a);
  59.             });
  60.             //选中省
  61.             $("#sheng").change(function () {
  62.                 sheng();
  63.             });
  64.             //选中市
  65.             $("#shi").change(function () {
  66.                 shi();
  67.             });
  68.         });
  69.     </scrip去掉t>
  70. </head>
  71. <body>
  72.     <form id="form1" runat="server">
  73.     <div>
  74.         <select id="sheng"></select>
  75.         <select id="shi"></select>
  76.         <select id="xian"></select>
  77.         <input type="button" value="test" />   
  78.     </div>
  79.     </form>
  80. </body>
  81. </html>
复制代码
AjaxDemo.rar (196.62 KB, 下载次数: 4)




上一篇:电脑硬盘C5警告,怎么办
下一篇:jquery几个常用知识点
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2015-8-21 21:44:21 | 显示全部楼层
我来补充下

SSLD.rar

185.49 KB, 下载次数: 6, 下载积分: 威望 -1 点, 贡献 -1 点

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2015-8-22 07:45:21 | 显示全部楼层

非常给力!!!
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2015-8-22 17:55:02 | 显示全部楼层
admin 发表于 2015-8-22 07:45
非常给力!!!

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2025-9-4 05:01

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表