之前一直用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. Alluxio 内存存储系统部署

    一.文件下载和解压 1)下载地址:http://www.alluxio.org/download 2) 解压命令如下: $ wget http://alluxio.org/downloads/file ...

  2. How To Install and Configure Elasticsearch on Ubuntu 14.04

    Reference: https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-elasticsear ...

  3. sql增删改查封装

    App.config文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> ...

  4. Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用

    Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...

  5. 【高可用HA】Apache (4) —— Mac下配置Apache Httpd负载均衡(Load Balancer)之mod_jk

    Mac下配置Apache Httpd负载均衡(Load Balancer)之mod_jk httpd版本: httpd-2.4.17 jk版本: tomcat-connectors-1.2.41 参考 ...

  6. 用window调用kjb和ktr

    1.    运行cmd,进入kettle的目录cd C:\soft\kettle\data-integration 2.    运行start pan.bat命令 Pan—转换执行器(命令行方式),一 ...

  7. jQuery.Form插件介绍

    一.前言  jQuery From插件是一个优秀的Ajax表单插件,使用它可以让你非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery From有两个主要方法:ajaxForm和ajaxS ...

  8. 关于Cocos2d-x中节点和精灵的关系以及初始化

    1.每一个对象类都有一个自己public的一个create函数(等价于CREATE_FUNC),和init函数. 2.create函数返回的是自身的类型,init函数是在ceate函数被调用的时候自动 ...

  9. Java并发编程基础

    Java并发编程基础 1. 并发 1.1. 什么是并发? 并发是一种能并行运行多个程序或并行运行一个程序中多个部分的能力.如果程序中一个耗时的任务能以异步或并行的方式运行,那么整个程序的吞吐量和可交互 ...

  10. Unity中的Transform Gizmo中的Pivot和Center

    选择中心(Center)意味着使用当前所选所有物体的共同轴心, 选择轴心(Pivot)意味着将使用各个物体的实际轴心 区别在于是否选中了多个物体或者有层级关系的物体. 第一张图是Center,中心在组 ...