首页 > 其他分享 >select2多选下拉框

select2多选下拉框

时间:2023-06-07 21:14:25浏览次数:33  
标签:function 多选 val color value 下拉框 select2 click

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css"/>
<style type="text/css">
#color{
width: 300px;
}
</style>
</head>
<body>
<select name="" id="color" multiple="multiple">
<option value="">请选择颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
</select>
<button id="get_value">获取选中的值</button>
<button id="pull_value">红色和蓝色选中</button>
<button id="zero_value">清空值</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//初始化select2
$("#color").select2();

//获取选中的值
$("#get_value").click(function(){
var color_value = $("#color").val();
console.log(color_value);
})
// 给多选框赋值
$("#pull_value").click(function(){
$("#color").val(["red","blue"]).trigger("change");
})
// 清空
$("#zero_value").click(function(){
$("#color").val([]).trigger("change");
})
</script>
</html>

 

标签:function,多选,val,color,value,下拉框,select2,click
From: https://www.cnblogs.com/wugh8726254/p/17464566.html

相关文章

  • select 多选回显的时候input高度问题
    select多选回显的时候input高度没撑开内容超出setTimeout(function(){if(document.querySelector('.el-cascader__tags')){document.querySelector('#el-cascader.el-input__inner').style.setProperty('height',`${document......
  • element ui 中获取级联积极下拉框的示例
      <el-form-itemlabel="班组"prop="bz">              <el-cascader:options="orgTreeData"ref="bzNameRef":show-all-levels="false"                :props="{che......
  • elementUI下拉框图片
    1、定义数据optionsisAgent:[ //事项咨询群众标识        {          id:'1630396469564334081',          name:'高危',          url:require('@/assets/err.png')     ......
  • 直播平台搭建源码,调用系统相册实现多选图片上传
    直播平台搭建源码,调用系统相册实现多选图片上传1、首先需要给webview的WebChromeClient设置以下代码,才可以实现h5与Android交互选取图片 privateValueCallback<Uri>mValueCallbackUri;privateValueCallback<Uri[]>mValueCallbackUris;this.setWebChromeClient(newWebChro......
  • 直播系统搭建,编辑下拉框、日期时,会层级不够有遮蒙层问题
    直播系统搭建,编辑下拉框、日期时,会层级不够有遮蒙层问题加样式代码如下(示例):  下拉框的样式: .vxe-select--panel{  z-index:9997!important; }​日期的样式: .vxe-input--panel.type--date,.vxe-input--panel.type--month,.vxe-input--panel.type--week,.vx......
  • Element-Ui 根据开关按钮状态选择多选框某一行禁用和按钮禁用
    1、实现效果2、按钮状态改变<el-table-columnlabel="操作"align="center"class-name="small-paddingfixed-width"><templateslot-scope="scope"><el-button:disabled="scope.row.sta......
  • elementUI中<el-select>下拉框选项过多的页面优化方案——多列选择
    效果展示(多列可以配置)  一、icon下拉框的多列选择:  二、常规、通用下拉框的多列选择:【注】第二种常规、通用下拉框的多列选择,是在第一种的前端代码上删除几行代码就行(把icon显示标签删去),所以下面着重介绍第一种icon下拉框的多列选择。思路  不使用下拉框标签<el-option>......
  • win11右键如何关掉显示更多选项,展现出所有内容
    真不知道nc微软设计的这是啥功能,右键完还得再去点显示更多选项才能展开其他的,入手win11的第二天果断要把这个东西改掉...试了两个方法,方法二生效了,方法一不知道为啥没生效【方法一】1.cmd运行regedit,打开注册表编辑器,搜索HKEY_CURRENT_USER\Software\Classes\CLSID2.右键CLSID......
  • if if else else 多选的理解
    packagecom.fqs.test;importjava.util.Scanner;publicclasshello{publicstaticvoidmain(String[]args){Scannersc=newScanner(System.in);System.out.print("请在键盘输入1到100间的儿子成绩");intmy_num=sc.nextInt();//键盘......
  • python selenium 下拉框处理
    在自动化测试中,处理下拉框(Dropdown)有以下几种方式:1.使用Select类:通过select的相关方法选择option选项select.select_by_index(index)参数index表示的option索引select.select_by_value(value)参数value表示的是option元属中value的属性值select.select_by_visible_te......