下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文.

视图:

其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的属性,joblist是职位下拉框的属性,下拉框绑定请参照前文

@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>

当部门变动的时候,职位也相应改变:

    //根据城市获取酒店
$("#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,这个程式写在控制器里:

        [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"], )
}).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}

MVC 下拉框联动效果(单选)的更多相关文章

  1. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  2. JQuery打造下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...

  3. Easyui多个下拉框联动效果

    好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做 eayui的combobox  有onSelect ...

  4. 【ASP.NET】 MVC下拉框联动

    这个case主要是我在做项目的时候遇到一个需要根据input控件输入的内容,动态填充dropdown list中的内容, 实现二者联动的需求.在搜索了一些资源后,这篇博客解决了我的问题,所以记录并转载 ...

  5. jquery 实现层级下拉框联动效果 代码

    <select name="fCareId" id="fCareId"> <option selected="selected&qu ...

  6. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  7. html年月日下拉联动菜单 年月日三下拉框联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 月薪10K必备--C#下拉框联动

                   下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...

  9. Ext 下拉框联动第一次显示不正常的问题

    做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...

随机推荐

  1. pageadmin CMS Sql新建数据库和用户名教程

    用pageadmin网站制作如何Sql新建数据库和用户名 sql server软件安装完毕后,需要新建一个数据库用来作为网站的数据库. 1.打开sql管理界面,如图所示,找到数据库,右键单击数据库,选 ...

  2. QTP如何准确识别Dialog中的对象

    QTP脚本中有一个点击网页弹出框确定按钮的操作,实际运行时发现存在问题:调试过程,可正常识别并点击:但批量运行时不能识别并点击的概率接近100%. 修改WinButton的其中一个对象属性后,该问题解 ...

  3. 洛谷P2462 [SDOI2007]游戏(哈希+最长路)

    题面 传送门 题解 我们把字符的出现次数哈希起来,然后把每个点向能在它之后的点连边.那么这显然是一个\(DAG\),直接求最长路就行了 //minamoto #include<bits/stdc ...

  4. VMware虚拟机中如何配置静态IP

    我们首先说一下VMware的几个虚拟设备 VMnet0:用于虚拟桥接网络下的虚拟交换机 VMnet1:用于虚拟Host-Only网络下的虚拟交换机 VMnet8:用于虚拟NAT网络下的虚拟交换机 VM ...

  5. [Objective-C语言教程]基本语法(4)

    前面已经看到了Objective-C程序的基本结构,因此很容易理解Objective-C编程语言的其他基本构建块. Objective-C令牌 Objective-C程序由各种令牌组成,令牌可以是关键 ...

  6. 集成 jpush-react-native 常见问题汇总 (iOS 篇)

    给 iOS 应用添加推送功能是一件比较麻烦的事情,本篇文章收集了集成 jpush-react-native 的常见问题,目的是为了帮助用户更好地排查问题 1. 收不到推送 确保是在真机上测试,而不是在 ...

  7. struts2的优缺点

    Struts2框架10个优点:1.可以用任何POJO(存粹的java类)来接收表单输入.可以把POJO视为一个Action类 Action类:获得Form表单数据,并处理逻辑的类: DAO类:进行数据 ...

  8. wordcloud词云--可视化

    import jieba import wordcloud f = open("新时代中国特色社会主义.txt", "r", encoding="gb ...

  9. 【杂记】linux下各种软件安装方法(持续记录)

    1.安装jdk: 网上一堆说先从windows下压缩包,然后通过共享文件夹copy到linux系统里,然后解压安装,emmmmm 首先进入usr文件夹,新建java文件夹: mkdir java 直接 ...

  10. linux使用curl命令行进行接口测试

    cURL介绍cURL 是很方便的Rest客戶端,可以很方便的完成许多Rest API测试的需求,甚至,如果是需要先登入或认证的rest api,也可以進行测试,利用curl指令,可以送出HTTP GE ...