之前一直用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. config对象

    在js中经常定义一个config对象来保存当前对象里面的一些临时变量:定义这个变量可以被对象中所有的属性访问到,可以避免重复,减少内存占用,统一管理: 如: <script> functi ...

  2. js实现点击按钮实现上一张下一张相册滚动效果

    /****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar&qu ...

  3. python 高阶函数 map lambda filter等

    map 描述 map() 会根据提供的函数对指定序列做映射. 第一个参数 function 以参数序列中的每一个元素调用 function 函数,返回包含每次 function 函数返回值的新列表. ...

  4. 关于django模型里面的__str__和__unicode

    简而言之,就是__str__和__unicode__都是为了再管理站点中加载这个表时想显示什么属性,当然一般都是显示一个name,大体来讲是通用的.下面是抄的csdn上面的一篇文章. str()是Py ...

  5. 第2章 初学 emWin 的准备工作及其快速上手

    以下内容转载自安富莱电子论坛:http://forum.armfly.com/forum.php?mod=viewthread&tid=24552&extra=page%3D3%26f ...

  6. JAVA-JSP动作元素之param

    相关资料:<21天学通Java Web开发> 结果总结:1.用来传递参数,一般与<jsp:include>.<jsp:forward>联合使用.2.<jsp: ...

  7. Maven学习之(一)基本配置

    安装maven还几次没成功,不过最后还是查资料成功了,所以记录一下. 1.安装JDK,比较简单,就不说明了. 2.配置java的环境变量 JAVA_HOME (最开始因为java配置成C:\Progr ...

  8. 在centos中安装mangodb

    1.下载完安装包,并解压 tgz(以下演示的是 64 位 Linux上的安装) curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_6 ...

  9. centos6.5中的cron计划任务配置方法

    1.#crontab -u <-l, -r, -e> -u指定一个用户-l列出某个用户的任务计划-r删除某个用户的任务-e编辑某个用户的任务 2. cron文件语法与写法 可用cronta ...

  10. C++ - 动态申请数组空间

    // 用指针p指向由new动态分配的长度为length*sizeof(int)的内存空间. int * p = new int[length];