下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文.
视图:
其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的属性,joblist是职位下拉框的属性,下拉框绑定请参照前文
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@using (Html.BeginForm("aaai003sch", "aaa", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
< div class = "modal-body" >
< div class = "form-horizontal" >
< div class = "form-group" >
@Html.LabelFor(m => m.dept, new { @class = "col-sm-2 control-label" })
< div class = "col-sm-10" >
@Html.DropDownListFor(model => model.dept, Model.deptlist, new { @class = "form-control select2 ", style = "width: 100%;" })
@Html.ValidationMessageFor(m => m.dept, "", new { @class = "text-danger" })
</ div >
</ div >
< div class = "form-group" >
@ Html.LabelFor(m => m.job, new { @class = "col-sm-2 control-label" })
< div class = "col-sm-10" >
@Html.DropDownListFor(model => model.job, Model.joblist, new { @class = "form-control select2 page-select2-area", style = "width: 100%;" })
@Html.ValidationMessageFor(m => m.job, "", new { @class = "text-danger" })
</ div >
</ div >
</ div >
</ div >
</ div >
|
当部门变动的时候,职位也相应改变:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
//根据城市获取酒店
$( "#dept" ).change(function () {
var url = rootUrl + "aaa/GetJobByDept" ;
var dept = $( this ).val(); //获取部门的值
var job = $( "#job" );
job.empty(); //清空当前职位的值
//这句很重要,因我们用的是select2插件,若没有用这个插件可以去掉这句
job.select2( 'val' , '' );
$.ajax({
cache: false ,
type: "GET" ,
url: url,
data: { "Dept" : dept},
success: function (data) {
$.each(data, function (id, option) {
job.append($( '<option></option>' ).val(option.Id).html(option.Name));
});
job.trigger( 'change' );
},
error: function (xhr, ajaxOptions, thrownError) {
toastr[ "error" ]( "请选择部门" );
}
});
});
|
执行js里的URL,这个程式写在控制器里:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
[Description( "根据部门获取职位" )]
[AcceptVerbs(HttpVerbs.Get)]
[LoginAllowView]
public ActionResult GetJobByDept( string dept)
{
if (String.IsNullOrEmpty(dept))
{
throw new ArgumentNullException( "dept" );
}
StringBuilder sb = new StringBuilder();
sb = new StringBuilder();
sb.Append( " SELECT jobid,jobname " );
sb.Append( " FROM job_file " );
sb.Append( " LEFT JOIN dept_file ON jobdept = deptid " );
sb.AppendFormat( " WHERE deptid='{0}'" , dept);
DataTable dt = sqlHelper.getData(sb.ToString());
var result = dt.AsEnumerable().Select(row => new Item
{
Name = Utils.ObjToStr(row[ "jobname" ]),
Id = Utils.ObjToInt(row[ "jobid" ], 0)
}).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。