使用select多选标签笔记
之前一直用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多选标签笔记的更多相关文章
- 火狐下<a>标签里嵌套的<select>不能选的bug
今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...
- [RN] React Native 实现 多选标签
React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, ...
- 工作需求----表单select多选交互
由于工作需求接触select框多选的情况,以下是我分享的代码,主要是进入页面默认选中.支持多选属性: 1.html内容 multiple=”multiple” 属性为多选属性 <div clas ...
- JS 获取select(多选下拉)中所选值的示例代码
通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- js之全选即点击全选标签可选择全部复选框
目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...
- 在ASP.NET MVC中实现Select多选
我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...
- select多选框
select多选框 效果: 代码: <HTML> <HEAD> <TITLE>选择下拉菜单</TITLE> <meta http-equiv=&q ...
- vue结合element-ui 的select 全选问题
下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...
- select多选
1.css <style> .divBox{ width:400px; margin:100px auto; } .divBox span{ vertical-align:top; dis ...
随机推荐
- C#中关于用户名和密码的验证问题。
本次练习的目的是使用LinQ to XML,正则表达式,明天在这个基础上练习使用序列化和反序列化,继续加点儿小功能. 首先,这是一个窗体程序,设计如下: 存放用户名和密码的XML如下: 实现的代码如下 ...
- c++构造函数中调用构造函数---匿名对象再探
#include<iostream> #include<string> using namespace std; class Copy_construction { publi ...
- tomcat7和jetty启动的pom.xml配置
<plugins> <!-- tomcat7 --> <plugin> <groupId>org.apache.tomcat.maven</gro ...
- C语言 · Huffuman树
基础练习 Huffuman树 时间限制:1.0s 内存限制:512.0MB 问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出 ...
- C语言 · 核桃的数量
历届试题 核桃的数量 时间限制:1.0s 内存限制:256.0MB 锦囊1 最小公倍数. 锦囊2 答案是a, b, c的最小公倍数. 问题描述 小张是软件项目经理,他带领3个 ...
- HTML文档的经常使用标记
一.HTML文档中经常使用的标记有文字标记.段落标记.列表标记.超链接标记.图像标记.表格标记.框架标记和多媒体标记,以下对这些经常使用标记进行介绍: 1.文字标记:文字是网页重要的组成部分之中的一个 ...
- Ajax-ajax实例1-动态加载的 FAQ
动态加载 FAQ 的过程主要是利用 XMLHttpRequest(以下简称 XHR)对象与服务端通信,根据用户单击的感兴趣问题动态将内容加载到页面中.在具体实现时,有两点要注意的内容. 1 .对每个问 ...
- print spooler 服务无法启动 打印机全部消失
这往往是失败的打印任务导致的. 打开 C:\Windows\System32\spool\PRINTERS ,这个目录下的文件全是打印缓存,失败的任务也保存在这里.把这里的文件全部删除,然后再重新启动 ...
- svn命令使用常见问题
1.如何添加文件 ? svn add filename svn ci -m "add file" 2. svn ci 出现冲突 经常多人开发时难免多个人修改同一个文件导致冲突发送, ...
- Java获取yahoo天气预报
学习闲暇之余,写了个获取yahoo天气预报的java小程序,仅供娱乐. 首先我们需要获取您需要查询城市对应的代号,我们可以用HashMap来查询,代码如下: publicstatic HashMap& ...