This article describes the method of jQuery+ to implement the provincial and municipal secondary linkage function. Share it for your reference, as follows:
Page html:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="" Inherits="ThreeAjaxDrop_ddlAjax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title>DropDownListThree-level linkage</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial @Song style;}
</style>
<script type="text/javascript" src="../js/jquery-1."></script>
<script type="text/javascript">
$(document).ready(function() {
//Bind province data after loading$.getJSON("", function(data) { //Data's data format [{"text":"Beijing","value":"0001"},{"text":"Jiangxi","value":"0031"}]//alert(data[0].text+"|"+data[0].value);
$.each(data, function(index, value) {
//alert( + "|" + );
$("#selProvince").append("<option value='" + + "'>" + + "</option>");
});
});
// If the value of the province changes, the city drop-down box must be bound to be$("#selProvince").change(function(){
("selArea").=1; //Clear the data in the county drop-down box first("selCity").=1; //Clear the data of the city drop-down box first$.getJSON("",{"type":"city","fid":$(this).val()},function(data){
$.each(data, function(index, value) {
$("#selCity").append("<option value='" + + "'>" + + "</option>");
});
});
});
//The value of the city drop-down box changes$("#selCity").change(function(){
("selArea").=1; //Clear the data in the county drop-down box first$.getJSON("",{"type":"area","fid":$(this).val()},function(data){
$.each(data, function(index, value) {
$("#selArea").append("<option value='" + + "'>" + + "</option>");
});
});
});
});
</script>
</head>
<body>
<form runat="server">
<div>
Three-level linkage：<select >
<option value="Select a province">==Select a province==</option>
</select> <select ><option>==Choose a city==</option></select>& amp;nbsp; <select ><option>==Select a county==</option></select>
</div>
</form>
</body>
</html>
part:
(1)
public partial class ThreeAjaxDrop_Default :
{
protected void Page_Load(object sender, EventArgs e)
{
string sql = "select * from province";
string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\""; //Construct the format string {"text":"Beijing","value":"00001"} StringBuilder sb = new StringBuilder();
OleDbDataReader reader = (sql);
while (())
{
string str1 = (strTemp, reader["province"].ToString(), reader["provinceID"].ToString());
("{"+str1+"},");
}
();
string json = ();
("["+(0,-1)+"]");
}
}
(2)
public class HandlerDropDownAjax : IHttpHandler {
public void ProcessRequest (HttpContext context) {
if (["type"] != null && ["fid"] != null)
{
string type = ["type"].ToString(); // Mainly used to identify whether to query city or area table string fid = ["fid"].ToString(); //The parent ID of the city or region string sql = "select * from " + type + " where father='" + fid + "'";
//The type of constructing data[{"text":"Nanchang","value":"0001"},{"text":"Shangrao","value":"0002"}] //string strTemp = "{\"text\":\"{0}\",\"value\":\"{1}\"}";//I made a mistake here: directly constructing this will make an error, because there are formatted braces in the braces, and the parsing will make an error string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\""; //Construct the format string {"text":"Beijing","value":"00001"} StringBuilder sb = new StringBuilder();
OleDbDataReader reader = (sql);
while (())
{
string str1 = (strTemp, reader[2].ToString(), reader[1].ToString());
("{" + str1 + "},"); //Add braces on both sides after formatting }
();
string json = ();
("[" + (0, - 1) + "]"); //The function of Substring is to remove the last 'comma' }
}
public bool IsReusable {
get {
return false;
}
}
}
For more information about relevant content, please check out the topic of this site:Summary of optimization skills》、《Summary of string operation techniques》、《Summary of operating XML skills》、《Summary of file operation skills》、《Ajax tips summary topic"and"Summary of cache operation skills》。
I hope this article will be helpful to everyone's programming.