正文 jquery 二级/三级与多级联动菜单实现代码
jquery 二级/三级与多级联动菜单实现代码
发布时间： & 编辑：
使用jQuery的AJAX功能与asp.net实现省市区的三级联动效果，其他二级、三级或多级联动可以参照此方法。
&!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& + ASP.NET实现三级联动_&/title&
&script src=&/Scripts/jquery-1.4.1.min.js& type=&text/javascript&&&/script&
&style type=&text/css&&
#dpCity{ display: position:}
#dpArea{ display:position:}
省：&asp:DropDownList ID=&dpProvince& runat=&server&&&/asp:DropDownList&&&
市：&asp:DropDownList ID=&dpCity& runat=&server&&&/asp:DropDownList&&&
区：&asp:DropDownList ID=&dpArea& runat=&server&&&/asp:DropDownList&
复制代码 代码示例:
jQuery(document).ready(function () {
var dp1 = jQuery(&#dpProvince&);
var dp2 = jQuery(&#dpCity&);
var dp3 = jQuery(&#dpArea&);
//填充省的数据
loadAreas(&&, &dpProvince&);
//给省绑定事件，触发事件后填充市的数据
jQuery(dp1).bind(&change keyup&, function () {
var provinceID = dp1.attr(&value&);
loadAreas(provinceID, &dpCity&);
dp2.fadeIn(&slow&);
//给市绑定事件，触发事件后填充区的数据
jQuery(dp2).bind(&change keyup&, function () {
var cityID = dp2.attr(&value&);
loadAreas(cityID, &dpArea&);
dp3.fadeIn(&slow&);
function loadAreas(val, item) {
jQuery.ajax({
type: &post&,
url: &CityLoader.asmx/GetCityList&,
code: val,
a: Math.random()
error: function () {
success: function (data) {
var json = eval(data);
jQuery(&#& + item).append(&&option value='' selected='selected'&请选择&/option&&);
for (i = 0; i & json. i++) {
jQuery(&#& + item).append(jQuery(&&option&&/option&&).val(json[i].c_code).html(json[i].c_name));
后台代码：
复制代码 代码示例:
public class CityModel
public int ID
set { _id = }
get { return _ }
public string CityName
set { _cityname = }
get { return _ }
public string CityCode
set { _citycode = }
get { return _ }
//DAL层，返回DataTable，使用通用SqlHelper
public DataTable CityList(string pcode)
string SQL = &SELECT * FROM city WHERE 1=1&;
if (!string.IsNullOrEmpty(pcode))
if (pcode.Substring(2, 2) != &00&)
SQL = SQL + & AND RIGHT(citycode,2)&&'00' AND LEFT(citycode,4)=LEFT(@pcode,4)&;
SQL = SQL + & AND RIGHT(citycode,2)='00' AND LEFT(RIGHT(citycode,4),2)&&'00' AND LEFT(citycode,2)=LEFT(@pcode,2)&;
SQL = SQL + & AND LEFT(citycode,2)&&'00' AND RIGHT(citycode,4)='0000'&;
SQL = SQL + & ORDER BY sorts ASC&;
SqlParameter[] Param ={
new SqlParameter(&@pcode&,pcode)
using (SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction))
DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
return ds.Tables[0];
//BLL层，返回City的泛型列表
public List&CityModel& CityList(string code)
List&CityModel& list = new List&CityModel&();
DAL. CityDAL cd = new DAL.CityDAL();
DataTable dt = cd.CityList(code);
if (dt.Rows.Count & 0)
for (int i = 0; i & dt.Rows.C i++)
CityModel cm = new CityModel();
cm.ID = int.Parse(dt.Rows[i][&id&].ToString());
cm.CityName = dt.Rows[i][&cityname&].ToString();
cm.CityCode = dt.Rows[i][&citycode&].ToString();
list.Add(cm);
CityLoader.asmx：
/// &summary&
/// CityLoader 的摘要说明
/// &/summary&
[WebService(Namespace = &http://tempuri.org/&)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
// [System.Web.Script.Services.ScriptService]
public class CityLoader : System.Web.Services.WebService
[WebMethod]
public void GetCityList(string code)
CityBLL cb = new CityBLL();
StringBuilder sb = new StringBuilder();
List&CityModel& cm = cb.CityList(code);
sb.Append(&[&);
if (cm.Count & 0)
for (int i = 0; i & cm.C i++)
CityModel model = cm[i];
sb.Append(&{&);
sb.AppendFormat(@&&&c_name&&:&&{0}&&,&, model.CityName);
sb.AppendFormat(@&&&c_code&&:&&{0}&&&, model.CityCode);
sb.Append(&}&);
if (i & cm.Count - 1)
sb.Append(&,&);
sb.Append(&]&);
System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding(&utf-8&);
System.Web.HttpContext.Current.Response.Write(sb.ToString());
您可能感兴趣的文章：Excel如何制作联动二级下拉菜单
不得不说下拉菜单是一个很伟大的发明，不用输入直接选择，一者知道哪些可以选，二者选择起来方便快捷。特别是选择省份与城市的时候，联动菜单更是人性化，因为很有可能我们知道有哪些省份，但是哪些省份有哪些市却总是令人有一种朦胧感。所以联动下拉菜单在网页设计和excel中会经常使用，这个也是今天无意中学会的，特分享出来，在设计网页或电子表格时你也可以试试，三级、四级联动菜单同样可以参照此法。
&因为在下电脑安装的是office 2013，下面的例子以excel 2013设置省市联动下拉菜单作为示范，其他版本可以进行参照，大致操作还是相似的。
首先在excel中做好省市工作簿，选中省市内容部分后，按下键盘上快捷键：Ctrl+G，在弹出的定位对话框中点击红圈圈住的&定位条件&，如下图：
这时候会再弹出一个条件选择对话框，选择常量后点击确定即可，如下图：
接着点击excel上方的公式菜单，选择【根据所选的内容创建】，在弹出的对话框中选择&首行&并确定，如下图：
然后点击下方的+按钮创建一个新工作表sheet2，在新工作表中设置第一行为省份与城市，这一步比较简单，就不截图了。
接着选择省份下方的单元格，选择excel上方的【数据】菜单，然后点击数据验证，在弹出的对话框中选择允许为：序列，将光标定于来源框中，接着点击工作表sheet1，选择首行的省份，然后点击确定，如下图：
这时候已经完成一大步了，省份的效果已经出来了，将光标放在省份下的单元格即可看到下拉菜单，如图：
下面开始来制作城市部分，方法同省份的方法大体一致，选择某个省份如江西省后，选择城市下方的单元格，点击【数据】&&【数据验证】，在弹出的对话框中同样选择序列，来源框内填写：=INDIRECT($A2)，然后点击确定，这时候不仅城市的效果出来了，二级联动的效果也出来了，选择相应的省份对应的城市也会出来了。
步骤比较多，操作了很多遍才熟练，如有错误欢迎指正，如有疑问请在下方留言或通过新浪微博与我联系。
标签(Tag):
------分隔线----------------------------
------分隔线----------------------------leizhimin 的BLOG
用户名：leizhimin
文章数：725
评论数：2708
注册日期：
阅读量：5863
阅读量：12276
阅读量：372036
阅读量：1065990
51CTO推荐博文
高手莫入--AJAX实现下拉框联动
想当年，为了实现三级联动，找个js高手些了N多代码才搞定，但是很慢，因为一次要将所有的选项取来，然后排序，查找动态显示。
现在使用AJAX真是太方便了，下面做了个简单例子，实现下拉框的省市联动，效果图如下：
650) this.width=650;" onclick='window.open("/viewpic.php?refimg=" + this.src)' alt="" src="/attachment/906765.png" border="0" />
650) this.width=650;" onclick='window.open("/viewpic.php?refimg=" + this.src)' alt="" src="/attachment/931593.png" border="0" />
实现代码：
&html& &body& &script language="JavaScript"& &&&&&&&&var req = null; &&&&&&&&function test() { &&&&&&&&&&&&&&&&var province = document.all("province"). &&&&&&&&&&&&&&&&req = new ActiveXObject("Microsoft.XMLHTTP"); &&&&&&&&&&&&&&&&//设置属性，当后台处理完成后，回来调用myDeal方法。 &&&&&&&&&&&&&&&&req.onreadystatechange = myD &&&&&&&&&&&&&&&&//发出请求 &&&&&&&&&&&&&&&&req.open("GET", "c.jsp?province=" + province, "false"); &&&&&&&&&&&&&&&&req.send(null); &&&&&&&&} &&&&&&&&function myDeal() { &&&&&&&&&&&&&&&&if (req.readyState == 4) { &&&&&&&&&&&&&&&&&&&&&&&&//接收服务端返回的数据 &&&&&&&&&&&&&&&&&&&&&&&&var ret = req.responseT &&&&&&&&&&&&&&&&&&&&&&&&//处理数据 &&&&&&&&&&&&&&&&&&&&&&&&var obj = document.all("city"); &&&&&&&&&&&&&&&&&&&&&&&&for (var i = obj.options.length - 1; i &= 0; i--) { &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&obj.options.remove(i); //从后往前删除 &&&&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&&&&&&&&var ops = ret.split("|"); &&&&&&&&&&&&&&&&&&&&&&&&for (var i = 0; i & ops. i++) { &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var op = ops[i]; &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var ss = op.split(","); &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var oOption = document.createElement("OPTION"); //创建一个OPTION节点 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&obj.options.add(oOption);&&&&//将节点加入city选项中 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&oOption.innerText = ss[1];&&&&//设置选择展示的信息 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&oOption.value = ss[0];&&&&&&&& //设置选项的值 &&&&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&} &&&&&&&&} &/script& 省份：&select id="province" name="province" onchange="test();"& &&&&&&&&&option value="hn"&河南&/option& &&&&&&&&&option value="sx"&陕西&/option& &/select&&br& 城市：&select id="city" name="city"& &&&&&&&&&option value="zz"&郑州&/option& &&&&&&&&&option value="ly"&洛阳&/option& &/select&&br& &/body& &/html&
&%@ page contentType="text/charset=UTF-8" language="java" %& &% &&&&&&&&String id = request.getParameter("province"); &&&&&&&&System.out.println("id="+id); &&&&&&&&if(id !=null&& id.equals("hn")){ &&&&&&&&&&&&&&&&out.println("zz,郑州市|ly,洛阳市"); &&&&&&&&}else if(id != null && id.equals("sx")){ &&&&&&&&&&&&&&&&out.println("xa,西安市|xy,咸阳市"); &&&&&&&&} %&
这个功能挺实用的，选项数据可以从数据库中获取，为了把例子做简单点，就用jsp提供数据。
&本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)
13:27:23 10:53:58 14:51:04&&原Select2实现全国省市区三级联动下拉菜单大体效果就是，当你选择好省份时，他会出现一个select2插件的一个搜索框，也是今天才知道的这个插件，吃水不忘挖井人吧，分享给大家了~~~希望大家以后一起多多交流，学习进步~~~谢谢各位亲们&&&&&&&&&&&&&&&&&&分割线&&&&&&&&&&&&&&效果如下图~&&&&&&&&4个牛币请下载代码后再发表评论//Select2实现全国省市区三级联动下拉菜单/Select2实现全国省市区三级联动下拉菜单/css/Select2实现全国省市区三级联动下拉菜单/css/common.css/Select2实现全国省市区三级联动下拉菜单/css/select2.css/Select2实现全国省市区三级联动下拉菜单/images/Select2实现全国省市区三级联动下拉菜单/images/select2-spinner.gif/Select2实现全国省市区三级联动下拉菜单/images/select2.png/Select2实现全国省市区三级联动下拉菜单/images/select2x2.png/Select2实现全国省市区三级联动下拉菜单/index.html/Select2实现全国省市区三级联动下拉菜单/js精精精精原精原原精原精原原最热搜索分享话题编程语言基础Web开发数据库开发客户端开发脚本工具游戏开发服务器软硬件开源组件类库相关分享原最近下载暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友| 漏洞检测 |
| 隐藏捆绑 |
Android开发之多级下拉列表菜单实现（仿美团，淘宝等）(2)
其中的一个示例，其他两个就不列举了 package com.example.import com.example.adapter.TextAimport com.example.expandtabview.R;import android.content.Cimport android.util.AttributeSi
其中的一个示例，其他两个就不列举了
package com.example.
import com.example.adapter.TextA
import com.example.expandtabview.R;
import android.content.C
import android.util.AttributeS
import android.view.LayoutI
import android.view.V
import android.widget.ListV
import android.widget.RelativeL
import android.widget.T
public class ViewLeft extends RelativeLayout implements ViewBaseAction{
private static final String TAG = "ViewLeft";
private ListView mListV
private final String[] items = new String[] { "item1", "item2", "item3", "item4", "item5", "item6" };//显示字段
private final String[] itemsVaule = new String[] { "1", "2", "3", "4", "5", "6" };//隐藏id
private OnSelectListener mOnSelectL
private TextA
private String mD
private String showText = "item1";
private Context mC
public String getShowText() {
return showT
public ViewLeft(Context context) {
super(context);
init(context);
public ViewLeft(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
public ViewLeft(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
private void init(Context context) {
mContext =
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.view_distance, this, true);
setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mid));
mListView = (ListView) findViewById(R.id.listView);
adapter = new TextAdapter(context, items, R.drawable.choose_item_right, R.drawable.choose_eara_item_selector);
adapter.setTextSize(17);
if (mDistance != null) {
for (int i = 0; i < itemsVaule. i++) {
if (itemsVaule[i].equals(mDistance)) {
adapter.setSelectedPositionNoNotify(i);
showText = items[i];
mListView.setAdapter(adapter);
adapter.setOnItemClickListener(new TextAdapter.OnItemClickListener() {
public void onItemClick(View view, int position) {
if (mOnSelectListener != null) {
showText = items[position];
mOnSelectListener.getValue(itemsVaule[position], items[position]);
public void setOnSelectListener(OnSelectListener onSelectListener) {
mOnSelectListener = onSelectL
public interface OnSelectListener {
public void getValue(String distance, String showText);
public void hide() {
public void show() {
好，今天就到这里。。希望有用。
(责任编辑：幽灵学院)
------分隔线----------------------------
今天有空复习了一下Android中AIDL的使用，由于平时开发中使...
在之前的文章深入探究了Handler，我们知道了Android的消息机...
?之前一段时间，我都在研究Android自定义View的相关知识，随...
什么是ViewPager，刚一听到这个词，我们可能感觉很奇怪，但...
Only the original thread that created a view hierarchy c...
在这里写出我们项目中常用的两种弹窗方式,底部弹窗以及中间...
工作日：9:00-21:00
周　六：9:00-18:00
&&扫一扫关注幽灵学院