要实现的级联数据的效果是,咨询方式有多种,有的有子咨询方式,有的没有,直接上图
图一中选择自选方式,例如:选择面询,效果如图二,后面对应的有面询的子咨询方式,有的没有子咨询方式,如图三,没有子咨询方式,后面不显示
图一 图二 图三
首先创建一个dropdownlist和一个select,dropdownlist中的数据,从数据库中获取,select中的数据,从dropdownlist中获取id动态获取改变需要创建的
1.aspx页面
dropdownlist控件绑定的数据从数据库中获取
/// <summary>
/// 获取咨询方式
/// </summary>
private void GetConsultantType()
{
IList items = new ArrayList();
ListItem title = new ListItem();
title.Text = "咨询方式";
title.Value = "-1";
this.ddlConsultantTypeId1.Items.Add(title);
items = DAL.OzOa_Dal.ListOrderByTypeDal.GetConsultantTypeById();
for (int i = 0; i < items.Count; i++)
{
DAL.Model.RecepInfoType recpInfoType = (DAL.Model.RecepInfoType)items[i];
ListItem temp = new ListItem();
temp.Text = recpInfoType.rIType.ToString();
temp.Value = recpInfoType.rITypeID.ToString();
this.ddlConsultantTypeId1.Items.Add(temp);
}
}
对应的级联select控件中的数据,通过ajax无刷新的形式获取,首先创建一个js文件,和一个一般处理程序文件。
ConPro.js
$(document).ready(function () {
$("#ddlConsultantTypeId1").change(function () {
var id = $(this).val();
$.ajax({
type: "POST",
url: "../ashx/ConPro.ashx",
data: { type: "ConsultantType", id: id },
success: function (data) {
if (data == "fail") {
alert("loading failed");
}
else {
addProvinceList(data);
}
}
});
});
});
function addProvinceList(str) {
var strArray = str.split(";");
$("#selConsultantTypeId2").empty();
if (strArray.length == 1) {
for (var i = 0; i < strArray.length; i++) {
var strOptArr = strArray[i].split(",");
$("#selConsultantTypeId2").append("<option value='" + strOptArr[0] + "'></option>");
}
} else {
for (var i = 0; i < strArray.length; i++) {
var strOptArr = strArray[i].split(",");
$("#selConsultantTypeId2").append("<option value='" + strOptArr[0] + "'>" + strOptArr[1] + "</option>");
}
}
}
ConPro.ashx
using DAL.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
namespace OzoA.ashx
{
/// <summary>
/// ConPro 的摘要说明
/// 咨询方式实现省市级联的效果
/// </summary>
public class ConPro : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string type = context.Request["type"];
string id = context.Request["id"];
StringBuilder listStr = new StringBuilder();
if (type == "ConsultantType")
{
IList<RecepInfoType> consultantType = DAL.OzOa_Dal.ListOrderByTypeDal.GetConsultantType2ById1(id);
if (consultantType.Count == 0)
{
context.Response.Write(listStr);
}
else
{
foreach (RecepInfoType recepInfoType in consultantType)
{
listStr.Append(recepInfoType.rITypeID + "," + recepInfoType.rIType + ";");
}
int startIn;
startIn = listStr.Length - 1;
listStr.Remove(startIn, 1);
context.Response.Write(listStr);
}
}
else
{
context.Response.Write("fail");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
写上这些基本级联效果搞定,最后一个说如何在后台获取select中的数据
string consultantType1 = this.ddlConsultantTypeId1.SelectedValue;//咨询方式1
//string consultantType3 = this.selConsultantTypeId2.SelectedValue;//咨询方式2
string consultantType2 = Request.Form[“selConsultantTypeId2”];