关于knockout下拉多选值的应用
在最近的开发过程中,应用了一些关于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下拉多选值的应用的更多相关文章
- Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 如下,在datagri ...
- Jqure实现下拉多选
Web ") { try { ...
- easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值
通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jquery--获取多选框的值、获取下拉多选框的值
获取多选框的值 var packageCodeList=new Array(); $('#server_id:checked').each(function(){ packageCodeList.pu ...
- 我的第一个jquery插件:下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- multiSelect 下拉多选插件
multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...
- jquery学习笔记:获取下拉框的值和下拉框的txt
<div class="form-group"> <select class="form-control" id="iv_level ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
随机推荐
- 在线学编程!十大IT在线教育网站推荐
在线学编程!十大IT在线教育网站推荐 1.CSDN学院(http://edu.csdn.net/) CSDN学院是CSDN推出的一个面向中国软件开发者和IT专业人员的技术教育服务平台.主要提供IT领域 ...
- Jquery常用方法汇总(转)
https://blog.csdn.net/lucky___star/article/details/87883888
- laravel5.6之发送邮件
https://blog.csdn.net/weixin_41767780/article/details/80918143 在注册的时候可以增加一个邮箱激活的功能,为防止自己忘记,记录一下实现邮箱激 ...
- 使用提示(Hints)
对于表的访问,可以使用两种Hints. FULL 和 ROWID FULL hint 告诉ORACLE使用全表扫描的方式访问指定表. 例如: SELECT /*+ FULL(EMP) */ * FRO ...
- 【Activiti工作流引擎】官方快速入门demo
Activiti官方快速入门demo 地址: https://www.activiti.org/quick-start 0. 版本 activiti 5.22.0 JDK 1.8 1. 介绍 这个快速 ...
- error LNK2001: unresolved external symbol __imp___rt_sdiv
这个问题搞了我 5 天(包括双休日), 我一定要记录下来. 问题描述 用 Visual Studio 2008 编译 WinCE 7 平台的应用程序,编译没问题,链接时出现了一堆 Link error ...
- SQL2008 R2安装完成后开启services服务指引和 sa账号启用、数据类型
- SpringSide 3 中的安全框架
在SpringSide 3的官方文档中,说安全框架使用的是Spring Security 2.0.乍一看,吓了我一跳,以为Acegi这么快就被淘汰了呢.上搜索引擎一搜,发现原来Spring Secur ...
- linux初始化中的错误处理
你必须记住一件事, 在注册内核设施时, 注册可能失败. 即便最简单的动作常常需要内存 分配, 分配的内存可能不可用. 因此模块代码必须一直检查返回值, 并且确认要求的操作 实际上已经成功. 如果在你注 ...
- 浅谈使用spring security中的BCryptPasswordEncoder方法对密码进行加密与密码匹配
浅谈使用springsecurity中的BCryptPasswordEncoder方法对密码进行加密(encode)与密码匹配(matches) spring security中的BCryptPass ...