之前一直用checkbox做多选,其实 select也可以多选,只要多给一个属性即可。标签属性 http://www.w3school.com.cn/tags/att_select_multiple.asp

然后效果上可以多选,连选,反选(按下Ctrl 使用鼠标单击)等功能。

YII框架自带了这种标签的生成方法,即著名的小物件。调用代码如下

$form->field($model, 'type')->dropDownList($list,array('size'=>5,'multiple'=>'multiple'))->label(false);

这样就能把属性或者样式等传参传进去,然后生成的效果是

<select id="user-type" class="form-control" name="select_val[]" multiple="multiple" size="5">
<option value="1">test</option>
<option value="2">test2</option>
</select>

然后就可以多选了,当你选择多个以后,使用jquery获取选中的值的时候 会得到一个数组。例如 $("#标签id").val()  得到一个数组 ["1", "2"]

然后当你想反向绑定,通过获取的多个值,让select选中的话 可以这样赋值 $("#标签id").val(["1", "2"]);即可

使用select多选标签笔记的更多相关文章

  1. 火狐下<a>标签里嵌套的<select>不能选的bug

    今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...

  2. [RN] React Native 实现 多选标签

    React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, ...

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

    由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div clas ...

  4. JS 获取select(多选下拉)中所选值的示例代码

    通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  5. js之全选即点击全选标签可选择全部复选框

    目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...

  6. 在ASP.NET MVC中实现Select多选

    我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...

  7. select多选框

    select多选框 效果: 代码: <HTML> <HEAD> <TITLE>选择下拉菜单</TITLE> <meta http-equiv=&q ...

  8. vue结合element-ui 的select 全选问题

    下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...

  9. select多选

    1.css <style> .divBox{ width:400px; margin:100px auto; } .divBox span{ vertical-align:top; dis ...

随机推荐

  1. VC++编程之道读书笔记

    第二篇 缪误21:位图数据是按照红绿蓝顺序存储的 大家都知道位图的颜色是由红.绿.蓝三个分量构成的,但是位图颜色数据存储的方式则不是按照这个顺序存储的,而是按照蓝.绿.红的顺序存储的.并且对于真彩色位 ...

  2. python多线程的使用

    最近在做爬虫,经常用到多线程.这里总结一下我的多线程的使用习惯,方便取用 1.创建信号量: mutex=threading.Lock() 2.信号锁与释放 mutex.acquire() #临界区 m ...

  3. 一款基于jquery的侧边栏导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览   源码下载 实现的代码. html代码 ...

  4. Spring监管下的Hibernate配置文件

    今天看了看别人的程序,用的是SSH搭建的,自己回忆了下感觉假设採用注解的话那么Hibernate的配置文件hibernate.cfg.xml是还须要的,而*.hbm.xml则能够被注解所替代的,结果确 ...

  5. silverlight调用WebService传递json接收绑定数据

    1.接收数据: WebService通过接口接收数据.类型为object 2.类型转换: 通过json转换方法将object转换为json格式数据 3.调用WebService方法: silverli ...

  6. 【C#】允许泛型方法<T>返回空值Null

    在设计一个返回类型为T的泛型方法时,有时希望能返回空Null,然后会报错: 根据提示,将返回值由Null改为default(T)即可. default(T)表示返回当前T类型的默认值,如果T为int则 ...

  7. 各种hash函数

    public class HashAlgorithms { /** * 加法hash * @param key 字符串 * @param prime 一个质数 * @return hash结果 */ ...

  8. 数据库——SQL中EXISTS怎么用3(转)

    有一个查询如下: 1 SELECT c.CustomerId, CompanyName   2 FROM Customers c   3 WHERE EXISTS(   4     SELECT Or ...

  9. 一站式学习Wireshark(一):Wireshark基本用法

    按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接 ...

  10. ATM交换机 和普通交换机区别

    运行在 ATM协议上的交换机 普通的是运行在 以太网协议上的 ATM交换机 转发的是广域网二层协议数据包,以太网交换机转发的是局域网二层协议数据包. 网络的ATM是指:异步传输模式,全称是什么 Asy ...