在最近的开发过程中,应用了一些关于knockout的下拉项目。

关于下拉多选的开发在这里做一个记录。

下面直接上代码

添加的时候,无需给初始值

--viewmodel   
function ViewModel()
{
//岗位下拉绑定
this.postName = ko.observableArray([]);
};

  添加了一个触发。根据部门获得对应的岗位

    //根据部门ID去获得对应的岗位下拉选项
function jsSearchData(obj)
{
var depId = $(obj).val();
if ($.trim(depId) != "") {
console.log("type=" + depId);
$.getJSON("@Url.Action("Json_GetSelectPostAccordingToDepartmentId")", { DepartmentId: depId }, function (data) {
viewModel.postName(data);
});
} else {
viewModel.postName([]);
$("select[name=PostName]").trigger("change");
}
}

  

@Html.DropDownList("DepartmentId", ViewBag.DepartmentId as SelectList, new { @class = "select2 required", onchange = "jsSearchData(this);", @style = "width:120px;" })
<select data-bind="options:$root.postName,optionsText:'Text',optionsValue:'Value'" style="width:200px;" class="select2" name="PostName" multiple></select>

后台获得对应的数据

        /// <summary>
/// 根据部门ID获得对应所有的岗位
/// </summary>
/// <param name="DepartmentId"></param>
/// <returns></returns>
public ActionResult Json_GetSelectPostAccordingToDepartmentId(int? DepartmentId)
{
var list = new DepartmentJobService().FindAll(x => x.DEPARTMENT_ID == DepartmentId).Select(x => new SelectListItem() { Value = x.NAME, Text = x.NAME });
return Json(list, JsonRequestBehavior.AllowGet);
}

  编辑的时候,需要把对应绑定的值初始化

其他代码都一样,我这里只给初始化的代码

    function ViewModel()
{
      //这里传进来的参数类似于"行政助理,行政前台"这样的一个字符串,按逗号给他分割成一个数组。这个数组的组成就是select下拉的初始值
this.ownDepartmentSelectedOptions = ko.observableArray("@ownDepartmentPostName".split(",")); };
<select data-bind="options:postName,optionsText:'Text',optionsValue:'Value',selectedOptions:ownDepartmentSelectedOptions" style="width:200px;" class="select2" name="PostName" multiple></select>

关于下拉多选(multiple)给初始值,是由selectedOptions进行绑定的。把需要绑定的初始值序列化成数组绑定上去就可以了。初始化后的结果类似下面这个。

关于基本的绑定那些我就略过了,大概功能代码就是这些了。

关于knockout下拉多选值的应用的更多相关文章

  1. Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理

    datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3   需求场景 如下,在datagri ...

  2. Jqure实现下拉多选

    Web ")                 {                     try                     {                          ...

  3. easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值

    通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...

  4. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

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

  5. jquery--获取多选框的值、获取下拉多选框的值

    获取多选框的值 var packageCodeList=new Array(); $('#server_id:checked').each(function(){ packageCodeList.pu ...

  6. 我的第一个jquery插件:下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  7. multiSelect 下拉多选插件

    multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...

  8. jquery学习笔记:获取下拉框的值和下拉框的txt

    <div class="form-group"> <select class="form-control" id="iv_level ...

  9. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

随机推荐

  1. ViewPager封装工具类: 轻松实现APP导航或APP中的广告栏

    相信做app应用开发的,绝对都接触过ViewPager,毕竟ViewPager的应用可以说无处不在:APP第一次启动时的新手导航页,APP中结合Fragment实现页面滑动,APP中常见的广告栏的自动 ...

  2. codeforces1249-div3

    A B C 等比数列的性质,前面的i项的和,不会超过第i+1项 D 有若干个区间,要求每一个点被区间覆盖的次数不能超过k个.问移除的最少的区间的数目. 贪心: 若某个点被覆盖了k次以上,那么肯定是移除 ...

  3. phpStudy本地环境测试,打开网页很慢的解决办法!

    很多人应该都遇到了在使用phpStudy本地环境测试软件时候打开很慢的问题,甚至动辄达到了1000ms以上,开篇直接给出解决办法: 下面给大家介绍phpstudy访问速度慢的解决办法. 1.修改mys ...

  4. 开源CMS比较

    PHP-CMS的发展方向:简单,易用,美观  http://www.php-cms.cn/ 看点1,服务器一键安装,鼠标点点就搞定:输入数据库参数,在服务器上点一个按钮就完成全部的安装.简单配置一下网 ...

  5. PHP利用纯真IP数据库在本地实现IP地址信息查询

    https://blog.csdn.net/myweishanli/article/details/45098693 准备工作: 建议本地IP地址数据库,请到http://www.cz88.net/这 ...

  6. 关于DOM的一些基础问题

    什么是 DOM? DOM 是一项 W3C (World Wide Web Consortium) 标准,全称是文档对象模型(Document Object Model). DOM 定义了访问文档的标准 ...

  7. 用diiv实现多个方块居中嵌套--margin

    文章地址 https://www.cnblogs.com/sandraryan/ 案例:用diiv嵌套多个正方形,配合盒模型相关知识,使每个div在他的父元素上居中.(每个div中心点对齐) 涉及到m ...

  8. poj 3295

    题目意思就是计算表达式的值,如果所有情况下表达式为真就输出“tautology”,否则输出“not”. p, q, r, s, and t,每个人有两种情况,综合起来一共有32种情况,枚举所有情况最后 ...

  9. linux如何查看nginx是否启动

    Nginx是一个高性能的反向代理服务器,现在一般作为我们网站或其他Web服务的第一层代理,用户在浏览器请求首先经过的就是Nginx服务. 如果Nginx服务没有启动或异常结束,将会影响Web服务的正常 ...

  10. 2018-7-31-C#-判断两条直线距离

    title author date CreateTime categories C# 判断两条直线距离 lindexi 2018-07-31 14:38:13 +0800 2018-05-08 10: ...