jQuery MultiSelect 如何设置多选框的默认选中项

原创 2016年05月31日 19:55:14
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery.multiSelect.js" type="text/javascript"></script>
<link href="css/jquery.multiSelect.css" rel="stylesheet" type="text/css" />
我用的是jQuery MultiSelect 插件下拉多选框,
Select:
        <select id="control_7" name="control_7[]" multiple="multiple" size="5">
            <option value="">请选择</option>
            <option value="1">性病商务通</option>
            <option value="2">商务通</option>
            <option value="3">QQ</option>
            <option value="4">性病QQ</option>
            <option value="5">企业QQ</option>
            <option value="6">电话</option>
            <option value="7">性病电话</option>
            <option value="8">微信</option>
            <option value="9">竞D1</option>
            <option value="10">竞D2</option>
            <option value="11">竞D3</option>
            <option value="12">竞D4</option>
            <option value="13">400电话</option>
            <option value="14">挂号网</option>
        </select>
jQuery MultiSelect 插件:

.......................

if(jQuery) (function($){

//渲染HTML的一个单一的选项
function renderOption(id, option)
{
var html='<label><input type="checkbox" name="' + id + '[]" value="' + option.value + '"';
if( option.selected ){
html+='checked="checked"';
}
html += ' />' + option.text + '</label>';
return html;
}

// 渲染选项/的HTML optgroups
function renderOptions(id, options, o)
{
var html = "";
for(var i = 0; i < options.length; i++) {
if(options[i].optgroup) {
html += '<label class="optGroup">';
if(o.optGroupSelectable) {
html += '<input type="checkbox" class="optGroup"/>' + options[i].optgroup;

}
else {
html += options[i].optgroup;
}

html += '</label><div class="optGroupContainer">';
html += renderOptions(id, options[i].options, o);
html += '</div>';
}
else {
html += renderOption(id, options[i]);
}
}
return html;
}





我提交的时候都变没了,就一个了,我想要的是我选中几个默认选中就是几个。



在调用这个插件前用jquery设置optin的selected属性

JavaScript code
?
1
2
3
4
5
6
7
var v='1,2,3'//这个为保存的值,自己从数据库读取来赋值给v变量
v=','+v+',';//添加分隔符号,好indexOf进行比较
var arr=v.split(',');
$('#control_7 option').each(function(){
  if(v.indexOf(','+this.value+',')!=-1)this.selected=true;
});
//再调用插件初始化select对象

版权声明:本文欢迎转载!

HTML中select标签单选多选详解

select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 表单数据提交给服务器时包括 name 属性。 ...

html 原生下拉菜单 select ,多选 multiple

1 2 3 4 5 只要加上 multiple 参数即可实现多选。做个记录。...
  • FungLeo
  • FungLeo
  • 2015年09月23日 13:58
  • 12598

多选下拉控件multiselect使用小结

项目开发中,需要用到多选下拉列表插件,由于项目前端框架采用了bootstrap,因此自然选择了bootstrap的组件。经了解其有两组插件: 1、第一个组件是写bootstrap table的主人公 ...

JQuery MultiSelect(左右选择框)

demo $(function(){ //选择一项 $("#addOne").click(function(){ $("#from option:selected").clon...

插件介绍:bootstrap 左右移动多选框插件~Multiselect

官网: http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation引入文件:...

jquery multiselect插件实现下拉多选选框的效果

1、需要的下载的

multiselect多选框实现

1.效果图 2.依赖文件 jquery-ui.min.js     jquery.multiselect.js   jquery.js  jquery.multiselect.css   ...

两个多选框(select)之间值的左右上下移动

两个多选框(select)之间值的左右上下移动     两个多选框(select)之间值的左右上下移动的代码请参考:               MultiSelects     ht...

jQuery multiselect初始化及默认值修改

js部分: $(document).ready(function(){ $("#sceneIdSelectBox").multiselect({ multiple: tru...

bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery MultiSelect 如何设置多选框的默认选中项
举报原因:
原因补充:

(最多只允许输入30个字)