之前一直用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. 对于火狐浏览器中title不能换行自动变成...怎么解决的?

    width: 100px; overflow: hidden; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis;

  2. 超详细解说Hadoop伪分布式搭建--实战验证【转】

    超详细解说Hadoop伪分布式搭建 原文http://www.tuicool.com/articles/NBvMv2原原文 http://wojiaobaoshanyinong.iteye.com/b ...

  3. linux oracle 查看版本

    1.查找 which sqlplus /u01/app/oracle/product/10.2.0/db_1/bin/sqlplus 可以带出 oracle 安装地址  2.登录 sqlplus 输入 ...

  4. 关联容器——map、set

    map类型通常被称为关联数组,与正常数组类似,不同之处在于其下标不必是整数.我们通过一个关键字而不是位置来查找值(键值对). 与之相对,set就是关键字的简单集合.当只是想知道一个值是否存在时,set ...

  5. .Net应该学什么怎么学(三)

    更新时间:2012年06月05日18时26分 来源:传智播客.Net 接上篇[我来解惑].Net应该学什么怎么学(二)七.HTML.JavaScript.Dom        HTML是对网页长什么样 ...

  6. 【Visual Studio】报错SignTool Error: No certificates were found that met all the given criteria.

    问题:Virtual Studio如果证书或SignTool.exe签名工具出了问题,编译运行项目时会报这个错误. 解决:参考下面内容. http://stackoverflow.com/questi ...

  7. Qt 4.8.5 icpc: Command not found

    icpc: Command not found 交叉编译Qt4.8.5的时候出现

  8. dubbo_rpc原理

    alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.  这个框架/工具 ...

  9. 数据库——IN、ANY、SOME 和 ALL 操作符的使用

    sql中all,any,some用法 简介: --All:对所有数据都满足条件,整个条件才成立,例如:5大于所有返回的id select * from #A where 5>All(select ...

  10. windows和Linux查看端口占用进程并关闭

    Windows: 以端口8080为例: 1.查找对应的端口占用的进程:netstat  -aon|findstr  "8080"    ,找到占用8080端口对应的程序的PID号: ...