关于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进行绑定的。把需要绑定的初始值序列化成数组绑定上去就可以了。初始化后的结果类似下面这个。

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

原文地址:https://www.cnblogs.com/Gary-P/p/12160743.html

时间: 2024-11-08 07:17:00

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

下拉框选值

JS下拉复选框的实现

<html>   <head>     <script src="jquery-1.7.2.min.js"></script>     <script src="jquery.easyui.min.js" ></script>     <link   rel="stylesheet" href="css/themes/metro/easyui.css"

下拉多选

文件见附件: 使用方法: 1.前台代码 <%--下拉列表 --%> <link href="../Styles/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="../Styles/jquery.multiselect.css" rel="stylesheet" type="text/css&

c# 下拉多选的实现

1.首先是个TextBox <asp:TextBox ID="txtREFERRINGDOC" Width="130" runat="server" CssClass="txt" onfocus="this.blur();" onclick="showDiv('divREFERRINGDOC','txtREFERRINGDOC');">▼</asp:TextBox>

获取下拉框的值并通过拼接方式添加到td后面

html:<tr> <td class="Hint"><span class="color-red">*</span>选择分组:</td> <td width="40%"> <select id="groupId2" style="width: 80%;height: 30px"> <option th:if=&quo

Siebel 找字段、下拉菜单设置值、弹出新页面、弹出选择框、设置默认值 、按钮代码

产品缺陷太多,跟用户交互不人性化.例如搜索新建客户功能,用户输入后会自动保存数据,一旦保存后一. 找字段1.简单 CTRL+Q CTRL+Q 服务请求编号----对应的表.字段.长度: 客户编码-----对应的表.字段.长度(弹出新页面):- 点击上面的pick Applet会弹出“选取客户”对话框 有JOIN就不用TABLE:require代表必填 字段有两个值----项目编号 下图确定只有projectNum有用 3.表单中的字段(不在list column中,而是在control) 二.下

easyui下拉框获取值

easyui下拉框的值为json格式栗子: 前台的写法: function queryDes(){ $('#des').combobox({ url: 'businessBaseInfo/queryDes.action', valueField:'enmDatOpt', //往后台传的值 textField:'enmDatDes' //前台下拉框显示的内容 }); } url获取的json格式为下,这里的数据是后台包装好的json格式,可以直接获取: [ { "enmDatDes":

js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年

1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: 60px;"></select> 年 2:调用下面方法即可 window.onload = function(){ var sel = document.getElementById("cx_nd"); var date = new Date(); for(va

dojo-获取下拉框的值和文本

1.问题背景 这里有一个下拉框,其中选项为一年四季,选中后打印下拉框的值和文本 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>dojo-获取下拉框的值和文本</title> <link rel="stylesheet" href="js/dojo/dijit/themes/claro/cl