select2多选设置select多选,select2取值和赋值
select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给后端的字符串再传回前端,然后转为一位数组,再赋值给select2就会显示刚刚选中的值,赋值方法:$('#id').val(arr).trigger('change'),id为select的id属性,这里的arr是刚才从后端传回前端的id转成的一位数组。
select2设置select多选,select2取值和赋值,首先需要引入select2的js文件,select2官网地址:https://select2.org/
//select2html代码设置选项,list为后端查询出来的选项,循环赋值
- <select name="id" id="id" multiple="multiple">
- <option value="0">请选择部门</option>
- <volist name="list" id="vo">
- <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected" </eq>>{$vo.name}</option>
- </volist>
- </select>
//可以另外设置一个隐藏的input框来存select选中的id,方便传给后端
<input type="hidden" id="select_id" name="select_id"/>
//select2插件初始化
- $("#id").select2({
- language : "zh-CN",
- minimumInputLength : 0,
- placeholder:"可多选",//默认值
- allowClear: true,
- })
//select2插件赋值
- var select_id = $("#select_id").val();
- arr = select_id.split(",");//注意:arr为select的id值组成的数组
- $('#id').val(arr).trigger('change');
//select2多选,取值,在下拉框中选中以后,获取到选择的id值
- $('#id').change(function(){
- var o=document.getElementById('id').getElementsByTagName('option');
- var all="";
- console.log(o[1]);
- for(var i=0;i<o.length;i++){
- if(o[i].selected){
- all+=o[i].value+",";
- }
- }
- all = all.substr(0, all.length - 1);//去掉末尾的逗号
- $("#bumen").val(all);//赋值给隐藏的文本框
- })
select2设置select多选,select2取值和赋值大概就这些了,也是网上找了很多资料,尝试了很多次,因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥,最开始以为是数据,text,赋值了一些字符串,所以一直没用。
select2多选设置select多选,select2取值和赋值的更多相关文章
- JQuery select与radio的取值与赋值
radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...
- jquery select取值,赋值操作
select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...
- 浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...
- angularjs中设置select的选中项
最近用angularjs比较多,里面有很多自己的方法,都不咋会用,这篇只是个笔记,防止自己忘记 <select style="width:100%" ng-model=&qu ...
- bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)
h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 首先引入bootstrap和bootstrap-select的c ...
- Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项
项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> ...
- jquery 获取和设置 select下拉框的值(转手册)
##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...
- jquery 获取和设置 select下拉框的值
获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...
- JQuery获取和设置select下拉框的值
获取Select : 获取select 选中的 text : $("#sid").find("option:selected").text(); 获取selec ...
随机推荐
- Manjaro 安装笔记
双系统基本知识 [折腾日记]win10 ,ubuntu双系统安装避坑指南 Windows 下安装 Ubuntu 双系统(更新) rEFInd 总结注意点: 制作U盘启动盘一开始使用的是 Ulrstro ...
- 【转载】C#中List集合使用Remove方法移除指定的对象
在C#的List集合操作中,有时候需要将特定的对象或者元素移除出List集合序列中,此时可使用到List集合的Remove方法,Remove方法的方法签名为bool Remove(T item),it ...
- ThreadLocal源码及相关问题分析
前言 在高并发的环境下,当我们使用一个公共的变量时如果不加锁会出现并发问题,例如SimpleDateFormat,但是加锁的话会影响性能,对于这种情况我们可以使用ThreadLocal.ThreadL ...
- Redis 学习-安装、数据类型与 API 理解、Java 客户端
本博客是在学习<Redis从入门到高可用,分布式实践>教程时的笔记. 同时参考: https://www.cnblogs.com/jiang910/p/10020048.html 一.Re ...
- springboot学习入门简易版八---springboot2.0多环境配置、整合mybatis mysql8+(19-20)
2.11 SpringBoot多环境配置(19) application.properties中配置 Spring.profiles.active=prd 配置环境: Application-dev ...
- ASP.NET 取得 Request URL 的各个部分和通过ASP.NET获取URL地址的方法
网址:http://localhost:1897/News/Press/Content.aspx/123?id=1#toc Request.ApplicationPath / Request.Phys ...
- Spring Boot 笔记 (2) - 使用 log4j2 记日志
日志框架的选用 Spring 使用的默认日志框架是 logback, 默认情况下会采取默认的 autoconfiguration; 即便想对日志的一些配置进行修改也比较方便, 详细可以参考: Spri ...
- LeetCode - 86、分隔链表
给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = 1->4-&g ...
- noi 7827 质数的和与积
描述 两个质数的和是S,它们的积最大是多少? 输入一个不大于10000的正整数S,为两个质数的和.输出一个整数,为两个质数的最大乘积.数据保证有解.样例输入 50 样例输出 589 欧拉筛+尺取.实际 ...
- PL/sql配置相关
可以安装oracle之后,打开PL/sql之后,自动找到oracle的路径以及数据库连接. 或者:安装oracle客户端,手动在PL/sql中配置oic以及oracle主目录的位置,并且配置好C: ...