Mutiselect下拉复选框(保存和设置默认选中项)

HTML代码 <asp:DropDownList ID="ddlWarehouseIds" runat="server" CssClass="ddl"></asp:DropDownList>
 <input type="hidden" name="<%#Eval("WarehouseNames")%>" id="hid_<%#Eval("UserID")%>"  value=" <%#Eval("WarehouseIds")%>" />


Mutiselect 插件地址  http://www.cnblogs.com/xinchuang/archive/2013/05/24/3096757.html

//设置选中项 ===========================================================

  1  //初始化
  2         $(function()
  3         {
  4             $(".ddl").multiselect({
  5                 noneSelectedText: "--请选择仓库--",
  6                 checkAllText: "全选",
  7                 uncheckAllText: ‘全不选‘,
  8                 selectedList:4
  9                 //header:"7"
 10             });
 11         });
 12         //设置默认选中项
 13         $(function()
 14         {
 15             $("#TableList tr td[id]").each(function()
 16              {
 17                   var objs=$(this).children();
 18                   var warehouses=objs[2];
 19                   var warehouseNames=$(warehouses).attr("name");
 20                   var warehouseids=$(warehouses).val();
 21                   //展示给用户选择的仓库
 22                   var spans=$(objs[1]).children();
 23                   if(warehouseNames.length>0)
 24                   {
 25                     $(spans[1]).text(warehouseNames);
 26                   }
 27                   else
 28                   {
 29                     $(spans[1]).text("--请选择仓库--");
 30                   }
 31                   //点击文本框 选中默认项
 32                   var ids=warehouseids.split(",");
 33                   $(objs[1]).click(function()
 34                   {
 35                       var div=  $("#UploadForm").nextAll("[name]");//手动改的源码 点击文本框时 给下拉框添加个属性 以标识当前修改的下拉框
 36                       //alert(div.attr("name"));
 37                       var ul=$(div).children(":last-child");
 38                      // alert (ul.attr("class"));
 39                       var lis=ul.children();
 40                       //alert(lis.length);
 41
 42                       //清空默认选中值
 43                       $(lis).each(function(){
 44                             //获取lable
 45                             var me=$(this).children();
 46                            // alert(me.length);
 47                            // alert (me.attr("class"));
 48                            //获取input标签
 49                           var input=me.children(":first-child");
 50                           //删除默认属性
 51                           input.removeAttr("checked");
 52                           input.removeAttr("aria-selected");
 53                       });
 54
 55
 56                       for (var j=0;j<ids.length;j++)
 57                       {
 58                           for (var i=0;i<lis.length;i++)
 59                           {
 60                             //获取lable
 61                             var me=$(lis[i]).children();
 62                            // alert(me.length);
 63                            // alert (me.attr("class"));
 64                             //获取input标签
 65                             var input=me.children(":first-child");
 66                             //获取input的值
 67                             var inputValue=input.val();
 68
 69                            // alert(inputValue)
 70                             //删除默认属性
 71                              //input.removeAttr("checked");
 72                              //input.removeAttr("aria-selected");
 73                             //重新 绑定数据库中读取的数据
 74                             if(inputValue*1==ids[j]*1)
 75                             {
 76                                 $(input).prop("checked","checked");
 77                                 $(input).attr("aria-selected","true");
 78                             }
 79                           }
 80                       }
 81                   });
 82              })
 83         })
 84         //保存=========================================
 85         function SaveUserWarehouse(userId,obj)
 86         {
 87
 88             var me =$(obj).parent().prev().children();
 89             var valuestr = me.multiselect("getChecked").map(function () {
 90                 return this.value;
 91             }).get();
 92             //alert(valuestr);
 93             // alert(typeof(valuestr));
 94             //var me =$(obj).parent().prev().children();
 95             //var valuestr = me.multiselect("MyValues");
 96              $.ajax({
 97                 type: "POST",
 98                 url: "/B2C/handlers/Warehouse/SaveUserWarehouse.ashx",
 99                 data: { "warehouseids":valuestr.toString(),"userId":userId},
100                 success: function(msg)
101                 {
102                     if(msg =="ok")
103                     alert ("保存成功!");
104                     reload();
105                 },
106                 error: function() {
107                     alert("请求异常,请稍后再试!");
108                 }
109             });
110         }
时间: 2024-10-28 23:09:40

Mutiselect下拉复选框(保存和设置默认选中项)的相关文章

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"

自定义实现 PyQt5 下拉复选框 ComboCheckBox

一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下拉复选框,主要就是继承 QComboBox 类,然后将复选框 QCheckBox 加入其中,并实现相应的功能. 最终实现的下拉复选框效果如下: 二.代码实现 1.主要方法 在 PyQt5 中,有几个主要的方法需要了解一下,方法名称和对应的含义如下: QtWidgets.QComboBox.setVi

下拉复选框

$('#beerId').combobox({ url: '/index.php/Admin/Beer/getBeer', valueField: 'id', textField: 'text', panelHeight: 'auto', multiple: true, formatter: function (row) { var opts = $(this).combobox('options'); return '<input type="checkbox" class=&

angular2.x 下拉多选框选择组件

angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接:https://pan.baidu.com/s/1dEHwKmt 密码: mhta 下面贴代码: 界面 引用  selectList  是 下拉框的数据列表 redSelList() 方法是获取 选择完成后的数据 <app-select-checkbox [itemList]="selectL

自己用ul模拟实现下拉多选框,

模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../js/plugins/layui/css/lay

关于通过jq /js 实现验证单选框 复选框是否都有被选中

今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问题来了 得出来的值 怎么做判断的 ,到现在也没弄明白. 最后果断 用jq来实现,刚开始也是怎么都不行  最后发现clss的值被我写错了 哎 剁手! 好了 下面上jq 实现 验证 单选框 复选框有没有同时被选中: <div class="tab-stpp" id="tab-s

判断复选框中是否有被选中的代码实例

判断复选框中是否有被选中的代码实例:复选框中一般多项,有时候我们需要判断这些付选中是否有被选中的项,下面就通过一个实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <t

修改数据信息时,判断复选框的值是否被选中

用函数in_array():判断数据是否在数组中: 将要获取某个复选框字段的数据时,格式:1,2,3,5 然后在页面直接判断这个复选框的某个值是否在这个数组里面: 当时是在TP框架里面做的: <input name="work_time[]" type="checkbox" value="1" <if condition="in_array('1',$work_time)">checked</if>

selectpicker下拉多选框ajax异步或者提前赋值=》默认值

Bootstrap select多选下拉框赋值 success: function (data) { var oldnumber = new Array(); $.each(data, function (i) { oldnumber.push(data[i].id); }); $('#editcolor .selectpicker').selectpicker('val', oldnumber);//默认选中 $('#editcolor .selectpicker').selectpicker