Multiple-select组件

一、组件说明以及API

1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。还是给出对应的文档API。

Multiple-Select源码主页: https://github.com/wenzhixin/multiple-select

Multiple-Select文档以及Demo: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN

2、第二个组件也是在github上面找的—— bootstrap-multiselect 。这个组件风格和第一个非常相似,文档也挺全面。

bootstrap-multiselect源码主页: https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文档以及Demo: http://davidstutz.github.io/bootstrap-multiselect/

<head>
    <link href="multiple-select.css" rel="stylesheet"/>
</head>
<body>
    <select multiple="multiple">
        <option value="1">abc</option>
        ...
        <option value="31">789</option>
    </select>
    <script src="multiple-select.js"></script>
    <script>
        $("select").multipleSelect({
            filter: true
        });
    </script>
</body>

http://www.cnblogs.com/landeanfen/p/5013452.html?utm_source=tuicool&utm_medium=referral

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

https://github.com/wenzhixin/multiple-select

http://loudev.com/

时间: 2024-08-14 20:43:57

Multiple-select组件的相关文章

如何实现select组件的选择输入过滤作用

实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / /** * @description This plugin allows you to make a select box editable like a text box while keeping it's select-option features * @description no stylesheets or images

freemarker写select组件(三)

freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=""> <select id="${id}" name="${id}"> <option>---请选择---</option> <#list datas as data> <#if key!="

在使用element ui时 select组件获取label问题

最近在工作的时候需要实现多个条件联合查询,这个其实就是一条sql语句.但是,我们数据库中存储的是根据前端传来id的值所对应的值,而不是直接存的id,使用select组件时,却只能取到value值,无法作为后台查询的条件. 我们需要的是select 组件的label值,而不是看不见的value值. 首先,根据element ui select组件使用手册,给组件添加'change'方法 1 @change=changeValue 再根据Array 的 find方法找出对应的值即可. 1 chang

freemarker写select组件(二)

freemarker写select组件 1.宏定义 <#macro select id datas value=""> <select id="${id}" name="${id}"> <option>---请选择---</option> <#list datas as data> <#if value == data> <option value="${da

freemarker写select组件报错总结(五)

1.错误描述 六月 26, 2014 10:44:49 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template processing error: "The only legal comparisons are between two numbers, two strings, or two dates.\nLeft hand operand is a freemarker.template.SimpleScalar

freemarker写select组件(四)

freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text="" headKey="" headValue=""> <select id="${id}" name="${id}"> <option>---请选择---</option> &l

freemarker写select组件报错总结(七)

1.错误描述 六月 26, 2014 11:26:27 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template processing error: "Expected collection or sequence. datas evaluated instead to freemarker.core.HashLiteral$SequenceHash on line 7, column 18 in inc/select

freemarker写select组件(五)

freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text="" headKey="" headValue=""> <select id="${id}" name="${id}"> <option>---请选择---</option> &l

页面多选下拉框 jquery.multiple.select

1.首先引用jquery.multiple.select.js.multiple-select.css 2.在页面select下拉列表里面加一个multiple="multiple" <select name="nimbusHost" id="nimbusHost" multiple="multiple"> <c:forEach items="${stormIps}" var="

freemarker写select组件报错总结(一)

1.具体错误如下 六月 25, 2014 11:26:29 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template processing error: "Expression name is undefined on line 2, column 33 in inc/select.ftl." Expression name is undefined on line 2, column 33 in inc/s