This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › jquery uses ajax request database for provincial and municipal linkage
View: 17984|Reply: 3

[Jquery] jquery uses ajax request database for provincial and municipal linkage

[Copy link]
Posted on 8/19/2015 9:09:49 PM | | |
Because it was the first time I did this effect, I slowly did it and found that I had written a lot of repetitive code.

There is no time to optimize now, let's make do with it, and finally attach the compressed package, including the database script.

In addition, the provincial and municipal linkage code written in pure js is attached

Use JS to realize the three-level linkage menu of provinces and cities
http://www.itsvse.com/thread-2072-1-1.html
(Source: Wuhan Software Engineering Vocational College)


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

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

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

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

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




Previous:Computer hard disk C5 warning, what to do
Next:jquery several common knowledge points

Related Posts
Posted on 8/21/2015 9:44:21 PM |
Let me add

SSLD.rar

185.49 KB, Download times: 6, Download credits: -1 prestige, -1 contribution
Posted on 8/22/2015 7:45:21 AM |
Delver_Si Posted on 2015-8-21 21:44
Let me add

Very powerful!!
Posted on 8/22/2015 5:55:02 PM |
admin posted on 2015-8-22 07:45
Very powerful!!

Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com