之前一直用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. C#与C++区别

    C#是三大主流OOP(面向对象编程)语言(C++,Java,C#)之一,也是最新的一种,其中必然借鉴了前两者的长处,“否则它的缔造者就该打屁股”——候捷语,见<C#Primer中文版>的译 ...

  2. FreeRTOS 低功耗之睡眠模式

    以下转载自安富莱电子: http://forum.armfly.com/forum.php 低功耗是 MCU 的一项重要的指标,比如某些可穿戴的设备,其携带的电量有限,如果整个电路消耗的电量特别大的话 ...

  3. iOS Reachability检测网络状态

    一.整体介绍 前面已经介绍了网络访问的NSURLSession.NSURLConnection,还有网页加载有关的webview,基本满足通常的网络相关的开发.其实在网络开发中还有比较常用的就是网络状 ...

  4. java 接口调用

    生产中遇到过这种问题,记录下java的接口调用问题. 一种是json方式: public static String sendPost(String url, JSONObject obj)throw ...

  5. jQuery (一)选择器

    上一章开始了jQuery的安装,这一张需要开始学习选择器了,不然不进行选择,就无法使用jQuery提供的库的功能不是. 常用的,就列举这么多吧 <!DOCTYPE html> <ht ...

  6. window 服务(一)

    windows服务应用程序是一种长期运行在操作系统后台的程序,它对于服务器环境特别适合,它没有用户界面,不会产生任何可视输出,任何用户输出都回被写进windows事件日志.计算机启动时,服务会自动开始 ...

  7. 【WPF】XAML实现按钮背景图片的点击切换

    原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样.想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色.背景图切换. 需 ...

  8. 【C#】List<T>对象的深复制

    一.List对象中的T是值类型的情况(int 类型等) 对于值类型的List直接用以下方法就可以复制: List<T> oldList = new List<T>(); old ...

  9. System类及其getProterties( )和getProperty( )

    System这个类来源: public final class System extends Object System类包含若干个有用的类字段和方法,而且不能被实例化.System类提供的工具包括标 ...

  10. Java命令学习系列(三)——Jmap

    Java命令学习系列(三)——Jmap 2015-05-16 分类:Java 阅读(479) 评论(0) Jmap jmap是JDK自带的工具软件,主要用于打印指定Java进程(或核心文件.远程调试服 ...