select多选(multiSelect)的使用

1.使用js包

bootstrap-multiselect-master

需要对应的js,css文件

2.定义select标签

//option标签省略

</select>

3.设定select属性

$("produce").multiselect(｛

buttonClass:‘multiSelect-btn‘,

buttonWidth:‘auto‘,

includeSelectAllOptions:true,

selectAllText:‘全选‘，

buttonContainer:‘<div class="btn-group"/>‘,

buttonText:function(options)｛

var selected="";

if(options.length == 0)｛

return "请选择"+‘<b class="caret"></b>‘;

｝else｛

options.each(function()｛

selected+= $(this).text()+‘,‘;

｝);

return selected.substr(0,selected.length-1)+‘<b class="caret"></b>‘;

｝

｝);

注意：1.在multiselect方法中，可以通过一些属性值设定自己需要的多项选择

2.通过$("#produce").val() 获取的值是数组的形式;同样赋予其初始值时，也需要数组的形式

eg: var selecteds="producePlan,peoduceList,produceCheck";

$("#produce").val(selecteds.split(",")); //则默认选中三个选

时间： 2024-11-06 21:59:07

select多选(multiSelect)的使用的相关文章

工作需求----表单select多选交互

由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div class="c-n-survey-option"> <select name="0" multiple=”multiple” class="c-n-survey-select" id="mySelect" > <

select多选 multiple的使用

select多选 multiple的使用 <html> <head> <script type="text/javascript"> function showDiv(id){ document.getElementById("selectOption").style.display="block"; document.getElementById("selectOption").styl

select多选

1.css <style> .divBox{ width:400px; margin:100px auto; } .divBox span{ vertical-align:top; display:inline-block; margin-top:16px; } .divBox .duiMutiple{ display:inline-block; width:330px; vertical-align:top; } .divSel{ height:35px; line-height:35px;

在ASP.NET MVC中实现Select多选

我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收多选Select的选中项呢? 实现效果如下: 初始状态某些选项被选中. 当按着ctrl键,进行重新选择多项,点击"提交"按钮,把选中项的id拼接. 对于Select中的项,包含显示值,Value值,以及是否选中,抽象成如下的类. public class City { public int

JQuery chosen插件，实现select多选

步骤:1.js 2.在select标签上添加 multiple="multiple" 属性 3.添加class=" chosen-select" 属性即可实现多选默认值选定: 1.获取标签默认值,根据格式拆分数据 2.使用 $('.chosen-select').chosen({ allow_single_deselect : true }); $('.chosen-select').trigger("liszt:updated"); eg:

<select>多选时的数据回显

<select>标签有个属性为multiple,当设置multiple="true"时,在页面上可以按住ctrl键进行多选,在Action中可以给一个string类型的数组来获取前台的值,例子如下: 在action中给出set/get方法即可.然后根据数据库中的字段,添加到对象中即可. 但是在数据修改的时候,从数据库中查找到的是一个用逗号分隔的字符串,因此在回显之前需要做一些处理. s1是后台返回到前台的json对象,通过逗号将数据库查到的字符串拆分一下,然后拿到<s

select多选框

效果: 代码: 1 <HTML> 2 <HEAD> 3 <TITLE>选择下拉菜单</TITLE> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <META NAME="Description" CONTENT="Power by hill"> 6 <

select 多选（EasyUI）

layui select多选下拉显示以及回显

<div class="layui-form-item layui-form-text" > <label class="layui-form-label"><span style="color:red;">* </span>多选</label> <div class="layui-form" style="margin-left:130px;&quo