|

因为第一次做这个效果,慢慢做起来,发觉,自己写了许多重复的代码。
现在也没有时间优化,大家凑合着看吧,最后附上压缩包,包括数据库脚本。
另外,附上用纯js写的省市联动代码
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PlaceInfo.aspx.cs" Inherits="AjaxDemo.PlaceInfo" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <scrip去掉t src="scrip去掉ts/jquery-1.4.1.min.js" type="text/javascrip去掉t"></scrip去掉t>
- <scrip去掉t type="text/javascrip去掉t">
- //省方法
- function sheng() {
- var $sheng = $("#sheng option:selected").val();
- $.ajax({
- url: "ajax3.aspx",
- type: "get",
- data: "test=x&sheng=" + $sheng,
- success: function (mesg) {
- $("#shi").empty();
- $("#shi").append(mesg);
- $("#shi option:eq(0)").attr("selected", "selected");
- var num = $("#shi option").length;
- if (num > 1) {
- $("#shi").show();
- } else {
- $("#shi").hide();
- }
- shi();
- }
- });
- };
- //市方法
- function shi() {
- var $shi = $("#shi option:selected").val();
- $.ajax({
- url: "ajax3.aspx",
- type: "get",
- data: "test=x&sheng=" + $shi,
- success: function (mesg) {
- $("#xian").empty();
- $("#xian").append(mesg);
- $("#xian option:eq(0)").attr("selected", "selected");
- }
- });
- }
- $(function () {
- $.ajax({
- url: "ajax3.aspx",
- type: "get",
- data: "",
- success: function (mesg) {
- $("#sheng").append(mesg);
- $("#sheng option:eq(0)").attr("selected", "selected");
- sheng();
-
- }
- });
- /**测试按钮**/
- $(":button").click(function () {
- var $a = $("#sheng option:selected").val();
- alert($a);
- });
- //选中省
- $("#sheng").change(function () {
- sheng();
- });
- //选中市
- $("#shi").change(function () {
- shi();
- });
- });
- </scrip去掉t>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <select id="sheng"></select>
- <select id="shi"></select>
- <select id="xian"></select>
- <input type="button" value="test" />
- </div>
- </form>
- </body>
- </html>
复制代码
AjaxDemo.rar
(196.62 KB, 下载次数: 4)
|
上一篇:电脑硬盘C5警告,怎么办下一篇:jquery几个常用知识点
|