首页 / JQUERY / asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含17830字，纯文字阅读大概需要26分钟。

内容图文

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用，需要用多个框架，一个典型的应用场景是省市三级联动，基于此应用，特将三种主要的ajax框架略作整理，方便有需要的朋友查阅。

在示例之前，我们先设置一个演示数据源，新建一个项目，项目结构如图：

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例 - 文章图片

主要文件如下：
AreaModel.cs:
代码如下:
using System;
using System.Collections.Generic;
namespace Downmoon.Framework.Model
{
#region PopularArea
public class Area
{
private string m_Area_ID;
/// <summary>
/// 地区编号
/// </summary>
public string Area_ID
{
get { return m_Area_ID; }
set { m_Area_ID = value; }
}
private string m_Area_Name;
/// <summary>
/// 地区名称
/// </summary>
public string Area_Name
{
get { return m_Area_Name; }
set { m_Area_Name = value; }
}
private double m_Area_Order;
/// <summary>
/// 排序
/// </summary>
public double Area_Order
{
get { return m_Area_Order; }
set { m_Area_Order = value; }
}
private int m_Area_Layer;
/// <summary>
/// 层级
/// </summary>
public int Area_Layer
{
get { return m_Area_Layer; }
set { m_Area_Layer = value; }
}
private string m_Area_FatherID;
/// <summary>
/// 父级ID
/// </summary>
public string Area_FatherID
{
get { return m_Area_FatherID; }
set { m_Area_FatherID = value; }
}
public Area() { }
public Area(string id, string name, double order, int layer, string father)
{
this.Area_ID = id;
this.Area_Name = name;
this.m_Area_Order = order;
this.m_Area_Layer = layer;
this.m_Area_FatherID = father;
}
}
#endregion
}

AreaControl.cs:
代码如下:


using System; 
using System.Collections.Generic; 
using Downmoon.Framework.Model; 
namespace Downmoon.Framework.Controllers 
{ 
public class AreaList : IArea 
{ 
// Area singleton 
private static AreaList instance; 
public static AreaList Instance 
{ 
get 
{ 
if (AreaList.instance == null) 
{ 
AreaList.instance = new AreaList(); 
} 
return AreaList.instance; 
} 
} 
public List<Area> GetAreaList() 
{ 
List<Area> Areas = new List<Area>(); 
Areas.Add(new Area("110000", "北京市", 0, 1, "000000")); 
Areas.Add(new Area("110100", "市辖区", 0, 2, "110000")); 
Areas.Add(new Area("110101", "东城区", 0, 3, "110100")); 
Areas.Add(new Area("110102", "西城区", 0, 3, "110100")); 
Areas.Add(new Area("110103", "崇文区", 0, 3, "110100")); 
Areas.Add(new Area("330000", "浙江省", 0, 1, "000000")); 
Areas.Add(new Area("330100", "杭州市", 0, 2, "330000")); 
Areas.Add(new Area("330200", "宁波市", 0, 2, "330000")); 
Areas.Add(new Area("330102", "上城区", 0, 3, "330100")); 
Areas.Add(new Area("330103", "下城区", 0, 3, "330100")); 
Areas.Add(new Area("330104", "江干区", 0, 3, "330100")); 
Areas.Add(new Area("330105", "拱墅区", 0, 3, "330100")); 
Areas.Add(new Area("330106", "西湖区", 0, 3, "330100")); 
Areas.Add(new Area("330203", "海曙区", 0, 3, "330200")); 
Areas.Add(new Area("330204", "江东区", 0, 3, "330200")); 
Areas.Add(new Area("330205", "江北区", 0, 3, "330200")); 
Areas.Add(new Area("330206", "北仑区", 0, 3, "330200")); 
Areas.Add(new Area("330211", "镇海区", 0, 3, "330200")); 
return Areas; 
} 
public List<Area> GetAreaListFindByParentID(string filter) 
{ 
return GetAreaList().FindAll( 
delegate(Area ar) 
{ 
return ar.Area_FatherID == filter; 
} 
); 
} 
} 
} 
 
Factory.cs 
 代码如下:
using System; 
using System.Collections.Generic; 
//using Downmoon.Framework.Model; 
namespace Downmoon.Framework.Controllers 
{ 
public class Factory 
{ 
public static IArea GetAreaController() 
{ 
return AreaList.Instance; 
} 
} 
} 
 
IArea.cs 
 代码如下:
using System; 
using System.Collections.Generic; 
using System.Text; 
using Downmoon.Framework.Model; 
namespace Downmoon.Framework.Controllers 
{ 
public interface IArea 
{ 
List<Area> GetAreaList(); 
List<Area> GetAreaListFindByParentID(string filterID); 
} 
} 
 
一、基于aspnet自带的Ajax框架，主要好处是与asp.net完全集成，无需写过多的 js。缺点是在framework2下需作一些设置，在Framework 4下无需设置。 
Framework 2： 

需首先在web.config文件中作配置： 

 代码如下:
<?xml version="1.0"?> 
<configuration> 
<configSections> 
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> 
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" /> 
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
</sectionGroup> 
</sectionGroup> 
</sectionGroup> 
</configSections> 
<system.web> 
<customErrors defaultRedirect="" /> 
<trace mostRecent="true" pageOutput="true" /> 
<pages> 
<controls> 
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
</controls> 
</pages> 
<compilation> 
<assemblies> 
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 
</assemblies> 
</compilation> 
<httpHandlers> 
<remove verb="*" path="*.asmx"/> 
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> 
</httpHandlers> 
<httpModules> 
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
</httpModules> 
</system.web> 

<system.webServer> 
<validation validateIntegratedModeConfiguration="false"/> 
<modules> 
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
</modules> 
<handlers> 
<remove name="WebServiceHandlerFactory-Integrated" /> 
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" 
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" 
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 
</handlers> 
</system.webServer> 
</configuration> 
 
前台页面： 
 代码如下:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> 
</asp:ScriptManager> 
<div> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<table width="500" border="0" cellpadding="0" cellspacing="2" > 
<tr> 
<td height="25" bgcolor="#EAEAEA" > 
请选择省/市/区： 
</td> 
<td bgcolor="#f7f7f7"> 
<asp:DropDownList ID="dpProvince" runat="server" 
AutoPostBack="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" /> 
<asp:DropDownList ID="dpCity" runat="server" AutoPostBack="true" 
onselectedindexchanged="dpCity_SelectedIndexChanged" /> 
<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" 
/> 
</td> 
</tr> 
<tr> 
<td height="25" bgcolor="#EAEAEA" > 
</td> 
<td bgcolor="#f7f7f7"> 
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> 
<ProgressTemplate> 
正在查询，请稍候……………………</ProgressTemplate> 
</asp:UpdateProgress> 
</td> 
</tr> 

</table> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="dpProvince" EventName="SelectedIndexChanged" /> 
<asp:AsyncPostBackTrigger ControlID="dpCity" EventName="SelectedIndexChanged" /> 
</Triggers> 
</asp:UpdatePanel> 
</div> 
 
Framework 4：与代码完全一样，只是无需在web.config中作配置。 

如图： 

二、基于JQuery1.4.1的Ajax框架，主要好处是与后续版本的asp.net完全集成。 

基于ashx作一个 Request，主要代码： 

 代码如下:
using System; 
using System.Collections.Generic; 
using System.Web; 
using Downmoon.Framework.Controllers; 
using Downmoon.Framework.Model; 
using System.Text; 
namespace dropdown_JQuery14_Net2 
{ 
/// <summary> 
/// Summary description for AjaxRequest 
/// </summary> 
public class AjaxRequest : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
string Area_FatherID = string.Empty; 
if (context.Request["pid"] != null) 
{ Area_FatherID = context.Request["pid"].ToString(); } 
string parentId = string.Empty; 
//mydbDataContext db = new mydbDataContext(); 
//根据传过来的Value值 进行查询 
//List<ChinaStates> list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList(); 
List<Area> list = Factory.GetAreaController().GetAreaListFindByParentID(Area_FatherID); 
context.Response.ContentType = "application/json"; 
context.Response.ContentEncoding = Encoding.UTF8; 
context.Response.Write(ListToJson(list)); 
context.Response.End(); 
} 
public string ListToJson(List<Area> list) 
{ 
StringBuilder sb = new StringBuilder(); 
if (list != null) 
{ 
sb.Append("["); 
for (int i = 0; i < list.Count; i++) 
{ 
sb.Append("{"); 
sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\","); 
sb.Append("\"Area_Name\":\"" + list[i].Area_Name + "\""); 
//sb.Append("\"Area_FatherID\":\"" + list[i].Area_FatherID + "\""); 
if (i != list.Count - 1) 
{ 
sb.Append("},"); 
} 
} 
} 
sb.Append("}"); 
sb.Append("]"); 
return sb.ToString(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
} 
 
前台：aspx 
 代码如下:
<!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> 
<mce:style type="text/css"><!-- 
#dpCity 
{ 
display: none; 
position: relative; 
} 
#dpArea 
{ 
display: none; 
position: relative; 
} 

--></mce:style><style type="text/css" mce_bogus="1"> #dpCity 
{ 
display: none; 
position: relative; 
} 
#dpArea 
{ 
display: none; 
position: relative; 
} 
</style> 
<mce:script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js"></mce:script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
请选择省/市/区： <asp:DropDownList ID="dpProvince" runat="server" /> 
<asp:DropDownList ID="dpCity" runat="server"> 
</asp:DropDownList> 
<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" /> 
</div> 
<mce:script language="javascript" type="text/javascript"><!-- 

$(function () { 
var $dp1 = $("#dpProvince"); 
var $dp2 = $("#dpCity"); 
var $dp3 = $("select[name$=dpArea]"); 
$dp1.focus(); 
//alert($dpCity); 
loadAreas("000000", "0"); 
$dp1.bind("change keyup", function () { 
if ($(this).val() != "") { 
//alert($("select option:selected").val()); 
//loadAreas($("select option:selected").val(), "1"); 
var strPid = $dp1.attr("value"); //获取城市 
loadAreas(strPid, "1"); 
$dp2.fadeIn("slow"); 
} else { 
$dp2.fadeOut("slow"); 
} 
}); 
$dp2.bind("change keyup", function () { 
var strCId = $dp2.attr("value"); //获取城市 
if ($(this).val() != "") { 
loadAreas(strCId, "2"); 
$dp3.fadeIn("slow"); 
} else { 
$dp3.fadeOut("slow"); 
} 
}); 
}); 
function loadAreas(selectedItem, level) { 
$.getJSON("AjaxRequest.ashx?pid=" + selectedItem, function (data) { 
switch (level) { 
case "0": 
$("#dpProvince").html(""); 
$("#dpProvince").append("<option value='' selected='selected'>请选择...</option>"); 
for (var i = 0; i < data.length; i++) { 
$("#dpProvince").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name)); 
}; 
break; 
case "1": 
$("#dpCity").html(""); 
$("#dpCity").append("<option value='' selected='selected'>请选择...</option>"); 
for (var i = 0; i < data.length; i++) { 
$("#dpCity").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name)); 
}; 
break; 
case "2": 
$("#dpArea").html(""); 
$("#dpArea").append("<option value='' selected='selected'>请选择...</option>"); 
for (var i = 0; i < data.length; i++) { 
$("#dpArea").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name)); 
}; 
break; 

default: 
break; 
} 
}); 
} 

// --></mce:script> 
</form> 
</body> 
</html> 



三、基于ExtJS 3.2的Ajax框架。 
后台ashx: 
 代码如下:
using System; 
using System.Collections.Generic; 
using System.Web; 
using Downmoon.Framework.Controllers; 
using Downmoon.Framework.Model; 
using System.Text; 
namespace dropdown_ExtJS32_Net2.Ajax 
{ 
/// <summary> 
/// Summary description for GetAreaXml 
/// </summary> 
public class GetAreaXml : IHttpHandler 
{ 
//string baseCode = "000000"; 
public void ProcessRequest(HttpContext context) 
{ 
string parentId = "000000"; 
if (context.Request["pid"] != null) 
{ 
parentId = context.Request["pid"].ToString(); 
} 
//parentId = (parentId.Length > 0) ? parentId : "000000"; 
////string parentId2 = "000000"; 
////if (context.Request["pid2"] != null) 
////{ 
//// parentId2 = context.Request["pid2"].ToString(); 
////} 
#region tony 2010.2.7 update 
List<Area> list = new List<Area>(); 
//if (parentId.Length > 0) 
//{ 
list = Factory.GetAreaController().GetAreaListFindByParentID(parentId); 
//} 
////else if (parentId2.Length > 0) 
////{ 
//// list = Factory.GetAreaController().GetAreaListFindByParentID(parentId2); 
////} 
#endregion 
context.Response.AddHeader("Cache-Control", "no-cache, must-revalidate"); 
context.Response.ContentEncoding = System.Text.Encoding.UTF8; 
context.Response.ContentType = "text/html"; 
StringBuilder sb = new StringBuilder(); 

for (int i = 0; i < list.Count; i++) 
{ 
sb.Append("{\"Area_Name\":\"" + list[i].Area_Name + "\","); 
sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\"},"); 
} 
string json = sb.ToString().TrimEnd(','); 
context.Response.Write("{\"Results\":[" + json + "]}"); 

} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
} 
 
前台页面.aspx 
 代码如下:
<!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>demo a dropdownlist by extjs 3.2 </title> 
<link rel="stylesheet" href="Scripts/ext/3.2/resources/css/ext-all.css" mce_href="Scripts/ext/3.2/resources/css/ext-all.css" /> 
<mce:script type="text/javascript" src="Scripts/ext/3.2/adapter/ext/ext-base.js" mce_src="Scripts/ext/3.2/adapter/ext/ext-base.js"></mce:script> 
<mce:script type="text/javascript" src="Scripts/ext/3.2/ext-all.js" mce_src="Scripts/ext/3.2/ext-all.js"></mce:script> 
<mce:script type="text/javascript"><!-- 
Ext.onReady(function () { 
//alert("extjs is Ok!"); 
}); 
function $() { 
return Ext.get(arguments[0]); 
} 
/*Area*/ 
function GetAreas() { 
//alert($(arguments[1])); 
var cityCtrl = $(arguments[1]).child("select"); 
var cityCtrlContainer = $(arguments[1]); 
cityCtrl.dom.options.length = 0; 
if ($(arguments[0]).getValue() == "") { cityCtrlContainer.hide(); return; } 

cityCtrl.disabled = true; 
var selectValue2 = $(arguments[0]).getValue(); 
Ext.Ajax.request({ 
url: arguments[2], 
params: { pid: selectValue2 }, 
method: 'GET', 
success: function (result, request) { 
//alert(params); 
var jsonData = Ext.util.JSON.decode(result.responseText); 
//alert(jsonData.Results.length); 
if (jsonData.Results.length > 0) { 
cityCtrl.dom.options.add(new Option("请选择", "000000")); 
for (var i = 0; i < jsonData.Results.length; i++) { 
cityCtrl.dom.options.add(new Option(jsonData.Results[i].Area_Name, jsonData.Results[i].Area_ID)); 
} 
cityCtrl.disabled = false; 
cityCtrlContainer.show(); 
} 
else { 
cityCtrlContainer.hide(); 
} 
}, 
failure: function (result, request) { Ext.MessageBox.alert('Failed', 'Successfully posted form: ' + action.date); } 
}); 
} 


// --></mce:script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table width="500" border="0" cellpadding="0" cellspacing="2"> 
<tr> 
<td height="25" bgcolor="#EAEAEA"> 
<div style="float: left; height: 20px; line-height: 20px;"> 
请选择</div> 
<asp:DropDownList Style="float: left;" mce_Style="float: left;" ID="dropProvince" runat="server" /> 
<div style="float: left; height: 20px; line-height: 20px;"> 
省</div> 
<asp:Panel ID="panelArea" runat="server"> 
<asp:DropDownList Style="float: left;" mce_Style="float: left;" ID="dropArea" runat="server" /> 
<div style="float: left; height: 20px; line-height: 20px;"> 
市</div> 
</asp:Panel> 
<asp:Panel ID="panelArea2" runat="server" > 
<asp:DropDownList Style="float: left;" mce_Style="float: left;" ID="dropArea2" runat="server" /> 
<div style="float: left; height: 20px; line-height: 20px;"> 
县</div> 
</asp:Panel> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

效果如图：


邀月注：本文版权由邀月和CSDN共同所有，转载请注明出处。 
助人等于自助! 3w@live.cn

内容总结

以上是互联网集市为您收集整理的asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例全部内容，希望文章能够帮你解决asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/380302.html

来源：【匿名】

【上一篇】Asp.net下用JQuery找出哪一个元素引起PostBack 【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例】教程文章相关的互联网学习教程文章

Jquery实现无刷新DropDownList联动实现代码_jquery【图】

先看HTML,我们引用Jquery,放两个DropDownList: 代码如下: #ddlEmployeeCars { display:none; position:absolute; top:50px; left:9px; } 　　接着写核心的Script: 代码如下: $(function() { var $ddl = $("select[name$=ddlEmployee]"); var $ddlCars = $("select[name$=ddlEmployeeCars]"); $ddl.focus(); $ddl.bind("change keyup", function() { if ($(this).val() != "0") { loadEmployeeCars($("select option:s...

jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值_jquery

—、获取dropdownlist的text（ddlList为服务器端dropdownlist的ID，生成name属性等于ddlList的select标签）　　$("#ddlList option:selected").text() 二、获取dropdownlist的value（ddlList为服务器端dropdownlist的ID，生成name属性等于ddlList的select标签）　　$("#ddlList").val() 三、获取radiobuttonlist的text（rbtList为服务器端radiobuttonlist的ID，生成name属性等于rbtList的一组input标签）　　$("input[name='rbt...

使用jQuery实现dropdownlist的联动效果(sharepoint2007)_jquery【图】

使用场景，比如，选中某个省份，然后下级列表中会显示对应的城市。 1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js。 2.创建主表和子表，建立对应关系。 3.在List的NewItem或者EditItem page中添加Content Editor Webpart,然后在其中添加脚本代码。 4.实现， dropdownObj控件:cascadeDropdownObj控件(该控件是通过脚本附加的):该方法是通过传入参数，来返回对于字表的记录代码如下:function GetSubDropdown(parameterVal){ c...

基于Jquery的将DropDownlist的选中值赋给label的实现代码_jquery

jquery代码代码如下: $(function() { $("#DropDownList1").bind("change", function() { $("#Label1").text($("#DropDownList1 option:selected").text()); }); 或者代码如下: $("#DropDownList1").bind("change", function() { $("#Label1").text($("#DropDownList1").val()); }); 其中对这个解释下： var name = $("#DropDownList1 option:selected").val(); //获取dropdownlist 里面选中的值 var name1 = $("#DropDownLis...

JQuery中对服务器控件DropdownList,RadioButtonList,CheckboxList的操作总结_jquery

一： DropDownList ------------------------------------------------------------------------------------------- 在使用 JQuery 进行遍历操作时， $("input").each(function(i) { ...... } 当操作对象的类型为 dropdownlist时：(备注：在firefox下DropDownList的类型为"select-one") 获得所选中的值： $(this).val(); (如果不是遍历操作时，$(this) 就替换成 $('#控件的Id') ) 获取选中的文本： $(this).find("option:selected...

Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码_jquery【图】

由于Jquery的版本更新很快，代码的写法也改变了许多，以下Jquery代码适query1.4版本以上Radio 1.获取选中值，三种方法都可以： $('input:radio:checked').val()； $("input[type='radio']:checked").val(); $("input[name='rd']:checked").val(); 2.设置第一个Radio为选中值： $('input:radio:first').attr('checked', 'checked'); 或者 $('input:radio:first').attr('checked', 'true'); 注： attr("checked",'checked')= attr("c...

ASP.NETjQuery实例7通过jQuery来获取DropDownList的Text/Value属性值_jquery【图】

界面代码：代码如下: 脚本代码：代码如下: $(document).ready(function () { // 绑定keyup和change事件 $("#").bind("keyup change", function () { if ($(this).val() != "") { // 这里需要注意，$(this).text()获取的是整个集合的text属性内容，所以需要再过滤下，把选中的项取出来 $("#message").text("Text: " + $(this).find(":selected").text() + "Value: " + $(this).val()); } else { $("#message").text(""); } ...

ASP.NETjQuery实例8(动态添加内容到DropDownList)_jquery【图】

首先准备好页面代码：代码如下: 主要通过jQuery的append方法动态添加内容，脚本代码如下：代码如下: Recipe8 $(document).ready(function () { $("#ddlFirst").bind("change", function () { // 添加change事件 $("#ddlSecond option").remove(); // 先删除所有项，以便重新加载 $("#ddlSecond").append("--- 请选择 ---"); if ($(this).val() == 1) { $("#ddlSecond").append("红色1"); $("#ddlSecond").append("红色2")...

ASP.NETjQuery实例18通过使用jQueryvalidation插件校验DropDownList_jquery【图】

先看界面代码：代码如下: DropDownList控件属性ToolTip会转换为Title，title的值可以作为校验规则required的提示信息，属性CssClass的值required就指定了插件的校验规则。脚本代码：代码如下: Recipe18 $(function () { $("#form1").validate({ errorLabelContainer: $("#message") }); }); .alertmsg { color: #FF0000; } 显示效果：另外如果不设置DropDownList的属性ToolTip和CssClass,脚本代码改为如下，也可...

Jquery加载时从后台读取数据绑定到dropdownList实例_jquery

代码如下: $(document).ready(function () { loadSchools(); }); function loadSchools() { var url = "@Url.Action("GetSchools")"; $.ajax({ url: url, type: "GET", dataType: "json", error: function () { alert("Error"); }, success: function (data) { var items = ""; $.each(data, function (i, school) { items += "<option value=\"" + school.SchoolId + "\">" + school.SchoolName + ""; }); $("#SchoolId").html(it...

GridView中获取被点击行中的DropDownList和TextBox中的值_jquery【图】

aspx页面代码：通过点击GridView中的a标签获取被点击行中的下拉框和文本框中的值代码如下: 保密男女 Save jquery代码：代码如下: function Save(obj) { var tr = $(obj).parent().parent(); //获取点击行的 tr tr.find("td").eq(3).find("select").val(); //获取点击行中的第四列 DropDownList1 的选择Value tr.find("td").eq(3).find("select").text(); //获取点击行中的第四列 DropDownList1 的选...

Jquery操作下拉框(DropDownList)实现取值赋值_jquery

1. 获取选中项：代码如下: 获取选中项的Value值： $(select#sel option:selected).val(); 或者 $(select#sel).find(option:selected).val(); 获取选中项的Text值： $(select#seloption:selected).text(); 或者 $(select#sel).find(option:selected).text(); 2. 获取当前选中项的索引值：代码如下: $(select#sel).get(0).selectedIndex; 3. 获取当前option的最大索引值：代码如下: $(select#sel option:last).attr("index")...

JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)_javascript技巧

jQuery获取Select选择的Text和Value：语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#se...

JQuery组件基于Bootstrap的DropDownList（完整版）【图】

在前文创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件中，实现了DropDownList的JQuery组件，但是留有遗憾。就是当下拉菜单出现滚动条的时候，滚动条会覆盖菜单右侧的两个圆角。使得下拉菜单左侧有2个圆角，右侧没有，看上去不是很完美。如下图所示：本文的内容就是如何恢复右侧的圆角先看看原本的下拉菜单的HTML结构：?<ul class="dropdown-menu dropdown-menu-right" role="menu"> ? <li><a href="#">Action</a></li...

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件【图】

Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap，可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。Bootstrap提供了不少的前端UI组件。带下拉菜单的文本框就是其中之一，效果图如下（真要自己完全设计，还得费一番功夫）关于该组件的详情参看Bootstrap官网、带下拉菜单的文本框看到上面的效果图，使我想到WinForm编程中的DropDownList控件。不过，和DropDownList控件相比，还缺少以下内容 1、当点击...

首页 / JQUERY / asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

内容导读

内容图文

内容总结

内容备注

内容手机端

【asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例】教程文章相关的互联网学习教程文章

Jquery实现无刷新DropDownList联动实现代码_jquery【图】

jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值_jquery

使用jQuery实现dropdownlist的联动效果(sharepoint2007)_jquery【图】

基于Jquery的将DropDownlist的选中值赋给label的实现代码_jquery

JQuery中对服务器控件DropdownList,RadioButtonList,CheckboxList的操作总结_jquery

Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码_jquery【图】

ASP.NETjQuery实例7通过jQuery来获取DropDownList的Text/Value属性值_jquery【图】

ASP.NETjQuery实例8(动态添加内容到DropDownList)_jquery【图】

ASP.NETjQuery实例18通过使用jQueryvalidation插件校验DropDownList_jquery【图】

Jquery加载时从后台读取数据绑定到dropdownList实例_jquery

GridView中获取被点击行中的DropDownList和TextBox中的值_jquery【图】

Jquery操作下拉框(DropDownList)实现取值赋值_jquery

JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)_javascript技巧

JQuery组件基于Bootstrap的DropDownList（完整版）【图】

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件【图】

JQUERY - 相关标签

ASPNET - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程