无刷新下拉框联动方法:

Controllers代码

       public JsonResult DH_Change(string DH_ID)
{
List<SelectListItem> TeamLeaderList = FinanceDB.Get_TeamLeaderList(DH_ID);
return Json(TeamLeaderList);
} public JsonResult TL_Change(string TL_ID)
{
List<SelectListItem> SalesList = FinanceDB.Get_SalesList(TL_ID);
return Json(SalesList);
}

后台获取并返回List<SeleceListItem>

public List<SelectListItem> Get_TeamLeaderList(string DH_ID)
{
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem { Value = "", Text = "All" }); string str = "SELECT distinct child_Staff_ID, child_name ";
str += "FROM VW_CASH_SLX_USER_TREE t inner join SYN_SLX_USERINFO u ";
str += "ON t.child_Staff_ID = u.cash_staff_id ";
str += "INNER JOIN dbo.SYN_SLX_USERSECURITY su on u.userid = su.userid ";
str += "where su.ISMANAGER = 'T' and ISNULL(child_staff_id, '') <> '' "; if (string.IsNullOrEmpty(DH_ID))
{
str += "and t.Root_Staff_ID in (select parm_value from parm_tbl where parm_group = 'SALES_DEPT_HEADER') order by child_name";
}
else
{
str += "and t.Root_Staff_ID in ('" + DH_ID + "') order by child_name";
} try
{
using (SqlConnection conn = new SqlConnection(connstr))
{
if (conn.State == ConnectionState.Closed)
{
conn.Open();
}
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = str;
cmd.CommandType = CommandType.Text;
SqlDataReader objDR = cmd.ExecuteReader(); while (objDR.Read())
{
string select_text = objDR["child_name"].ToString();
string select_value = objDR["child_Staff_ID"].ToString();
list.Add(new SelectListItem { Value = select_value, Text = select_text });
} cmd.Dispose();
}
}
catch (Exception e)
{
throw e;
}
return list;
} public List<SelectListItem> Get_SalesList(string TL_ID)
{
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem { Value = "", Text = "All" }); string str = "SELECT distinct child_Staff_ID, child_name ";
str += "FROM VW_CASH_SLX_USER_TREE t ";
str += "where ISNULL(child_staff_id, '') <> '' and ";
str += "t.Root_Staff_ID in ( "; if (string.IsNullOrEmpty(TL_ID))
{
str += "select parm_value from parm_tbl where parm_group = 'SALES_DEPT_HEADER' ) order by child_name ";
}
else
{
str += "'" + TL_ID + "') order by child_name";
} try
{
using (SqlConnection conn = new SqlConnection(connstr))
{
if (conn.State == ConnectionState.Closed)
{
conn.Open();
}
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = str;
cmd.CommandType = CommandType.Text;
SqlDataReader objDR = cmd.ExecuteReader(); while (objDR.Read())
{
string select_text = objDR["child_name"].ToString();
string select_value = objDR["child_Staff_ID"].ToString();
list.Add(new SelectListItem { Value = select_value, Text = select_text });
} cmd.Dispose();
}
}
catch (Exception e)
{
throw e;
}
return list; }

Ajax 动态更新

// Report sales change.
function DH_onChange() {
var dh_id = $("#salesdephead_report").val();
$.ajax({
type: 'get',
url: '/Reports.mvc/DH_Change/',
data: { DH_ID: dh_id },
contentType: 'application/json;charset=uft-8',
dataType: 'json',
success: function(data) {
var selectlist =data;
$("#teamleader_report").empty();
for(i=0;i<selectlist.length;i++)
{
$("#teamleader_report").append("<option value='"+data[i].Value+"'>"+data[i].Text+"</option>");
}
},
error: function() {
alert("faile to request data");
}
});
TL_onChange(dh_id);
} function TL_onChange(DH_ID) {
var tl_id;
if (DH_ID != null && DH_ID != "")
tl_id = $("#salesdephead_report").val();
else
tl_id = $("#teamleader_report").val();
$.ajax({
type: 'post',
url: '/Reports.mvc/TL_Change/',
data: { TL_ID: tl_id },
dataType: 'json',
success: function(data) {
var selectlist = data;
$("#requester_report").empty();
for (i = 0; i < selectlist.length; i++) {
$("#requester_report").append("<option value='" + data[i].Value + "'>" + data[i].Text + "</option>");
}
},
error: function() {
alert("faile to request data");
}
})
}
//

前台HTML代码

Sales Department Head<br />销售部门审批人:
<%=Html.DropDownList("salesdephead_report", null, new { @style = "width:125px;", onchange = "DH_onChange()" })%> Team Leader<br />团队组长:
<%=Html.DropDownList("teamleader_report", null, new { @style = "width:125px;", onchange = "TL_onChange('')" })%>

但是我们都知道,JQuery默认是异步执行的,所谓异步就是在ajax提交的过程当中,程序已经在执行下面的代码,两者是同时在进行的。有时候,我们却不希望ajax异步执行,而是想要等ajax返回数据后再作操作,那就需要做一点点的小改动。

Jquery的ajax还有async这么一个控制同步或者异步的属性。

再ajax中添加“ async:false, ”, 就会变成是同步执行了,也就是再ajax返回数据后才继续下面的代码。

其实除了修改属性async的方法外,还能通过传入一个函数解决问题。

以上,是今天所用到得一点知识,希望记录下有帮助到人啦。

04-13 16:30