select多选解决方案

最新推荐文章于 2024-03-24 09:41:52 发布

凌-志

最新推荐文章于 2024-03-24 09:41:52 发布

阅读量3.2k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/yanlzhl/article/details/54894910

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为项目功能需求的原因，也是第一次做。

2个问题：

1，首先就是解决选项的多选问题；

2，然后就是多选操作结果从数据库查询出来后，如何初始化这个多选项。

解决方案多是使用第三方库，也百度了很多，第一次实验了multiselect2side，然后查看了一些其他的，但是都卡死在了上面第二个问题的解决方案（有知道的望告知）;最终敲定了Multiple select。

Multiple select 是一个通过复选框来选择多元素的 jQuery 插件:).

使用环境：Requirements
 
 jQuery >= 1.7.0
Features
 
 默认选项允许显示复选框。
支持分组显示元素。
支持在一行中显示多个选项。
支持全选。
支持显示默认提示信息。

详见：http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN#multiple-select

至于引用，也就是第一个问题:

<link rel="stylesheet" type="text/css" href="/css/multiple-select.css" />   //样式
<script src="/framework/multiple-select.js"></script>;   //js

这两个组件下载链接

$(function() {
    $('#periods').change(function() {
        // console.log($(this).val());
    }).multipleSelect({
        width: '100%'
    });
});

这个逐渐是基于bootstrap的，当然你也可以不适用那就引用上面的两个组件就可以了。

======重点是第二个问题，我在Multiple select的文档上查到了======

文档中：

setSelects

设置 Multiple Select 的内容。

参数: values

类型: array

选择框的内容信息。

$('select').multipleSelect('setSelects', [1, 3]);
 [1, 3]就是从数据库查出来的数据，放在这里显示。

在这里需要注意的是：
我数据库的数据str=1,2,3  但是当我这样写时$('select').multipleSelect('setSelects', [str]);浏览器后台报了类型错误

解决方案：
var s=str;
var strs= new Array(); //定义一数组

strs=s.split(","); //字符分割
$('#periods').multipleSelect('setSelects', strs); //id=periods 是select框的