jQuery는 Ajax 요청 데이터베이스를 사용하여 주 및 지방 자치단체 간 연계를 수행합니다

작은 쓰레기 같은 놈들 · 게시됨 2015. 8. 19. 오후 9:09:49

이 효과를 처음 시도했기 때문에 천천히 해보니 반복적인 코드를 많이 작성했다는 것을 알게 되었습니다.

지금 최적화할 시간이 없으니, 그걸로 만족하고, 압축된 패키지와 데이터베이스 스크립트를 마침내 첨부하자.

또한, 순수 js로 작성된 주 및 지방 자치단체 연계 코드가 첨부되어 있습니다

JS를 사용해 성과 도시의 3단계 연계 메뉴를 구현하세요
http://www.itsvse.com/thread-2072-1-1.html
(출처: 우한 소프트웨어공학 직업대학)

<%@ 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)

Delver_Si · 게시됨 2015. 8. 21. 오후 9:44:21

덧붙이자면

관리자 · 게시됨 2015. 8. 22. 오전 7:45:21

Delver_Si 2015-8-21 21:44에 게시됨
덧붙이자면

정말 강력해요!!

Delver_Si · 게시됨 2015. 8. 22. 오후 5:55:02

관리자가 2015-8-22 07:45에 게시됨
정말 강력해요!!

[Jquery] jQuery는 Ajax 요청 데이터베이스를 사용하여 주 및 지방 자치단체 간 연계를 수행합니다

관련 게시물