开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何根据在select2 jQuery字段中选择的多个值显示/隐藏div

在select2 jQuery字段中选择多个值后，可以使用以下方法来显示/隐藏div：

首先，为select2字段添加一个change事件监听器，以便在选择值发生变化时触发相应的操作。

$('#select2-field').on('change', function() {
  // 在这里执行显示/隐藏div的逻辑
});

在change事件处理程序中，获取选择的多个值。可以使用val()方法来获取select2字段的值，它将返回一个数组。

var selectedValues = $('#select2-field').val();

根据选择的值来显示/隐藏div。可以使用each()方法遍历选择的值，并根据每个值的条件来显示或隐藏相应的div。

$.each(selectedValues, function(index, value) {
  if (value === 'value1') {
    $('#div1').show();
  } else if (value === 'value2') {
    $('#div2').show();
  } else {
    // 其他情况隐藏div
    $('#div1').hide();
    $('#div2').hide();
  }
});

在上述代码中，#div1和#div2是要显示/隐藏的div的选择器。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
</head>
<body>
  <select id="select2-field" multiple="multiple">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
  </select>

  <div id="div1" style="display: none;">Div 1</div>
  <div id="div2" style="display: none;">Div 2</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#select2-field').select2();

      $('#select2-field').on('change', function() {
        var selectedValues = $(this).val();

        $.each(selectedValues, function(index, value) {
          if (value === 'value1') {
            $('#div1').show();
          } else if (value === 'value2') {
            $('#div2').show();
          } else {
            $('#div1').hide();
            $('#div2').hide();
          }
        });
      });
    });
  </script>
</body>
</html>

这样，根据在select2 jQuery字段中选择的多个值，相应的div将会显示或隐藏。

相关搜索:Adobe Acrobat Pro -如何根据从下拉字段中选择的值显示或隐藏页面 WordPress /重力表单-根据数字字段的值显示/隐藏div 如何使用if语句在jquery中显示和隐藏2div？如何使用Jquery根据div中的元素隐藏div 如何根据Jquery选择的选项在tr中添加输入字段如何根据下拉选择显示和隐藏表单中的字段？如何根据其他选择显示/隐藏选择列表中的项目如何根据文本字段的值显示/隐藏某些元素？如何根据某些字段值隐藏集合中的项？如何根据选定下拉-JQuery和Javascript的值按ID隐藏和显示div

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

VBA实战技巧19：根据用户在工作表中的选择来隐藏显示功能区中的剪贴板组

excelperfect 有时候，我们可能想根据用户在工作表中的选择来决定隐藏或者显示功能区选项卡中的特定组，避免用户随意使用某些功能而破坏我们的工作表结构。下面，我们通过一个示例来演示。...我们想让用户选择工作表列B中的任意单元格时，隐藏“开始”选项卡中的“剪贴板”组，而当用户选择其他单元格时，该组又重新显示，如下图1所示。 ?...图1：当用户选择的单元格在列B中时，“剪贴板”组隐藏，处于其他单元格中时，“剪贴板”组显示首先，我们新建一个工作簿并保存。...图2：在Custom UI Editor For Microsoft Office中编辑输入XML 重新打开工作簿，按Alt+F11键打开VBA编辑器，插入一个标准模块，输入下面的代码： Public...) InRange =Not interSectRange Is Nothing Set interSectRange = Nothing End Function 双击工程资源管理器中的

4.1K1 0

python_day15_前端_jQue

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是jQuery对象？ ...# 隔了一层或多层标签的邻居 xxx p3p3 毗邻 script中添加 $('div~b').css('...// 有值显示true,没有直接false //也可以直接设定值 attr 跟prop 都是只有一个为查询,两个(第一个是对象,第二个是值) console.log($('.inp2').prop(...增加在已有块联标签的下边在标签外 // $(".increase").after($ele) $ele.insertAfter(".increase") ?...position // 相对于已经定位的父标签的偏移量 //给down增加一层测试position偏移量 js中增加 .donw_f {position: absolute;} <div class

6K2 0

新手编程1001问（2）

新手编程1001问（2） Q：‍前端如何实现页面下拉框Select的联动？ A：上一期，我们回答了JS/JQuery如何获取下拉框选中的文本和值。那么今天的问题，我们可以继续聊聊下拉框了。...下拉框在前端设计中是一个很常用的列表控件。独立的下拉框要实现起来并不难。但是，有时候我们会遇到两个甚至多个下拉框需要联动的问题，这时候，页面的实现就不是一个简单的交互了。...它需要我们根据上一个下拉框选中的值来动态更新下一个下拉框的列表。...因此，实现联动需要解决的问题关键在于，页面不刷新的情况下，能够根据上一个下拉框的值，获取下一个下拉框的列表数据，并更新到列表。...:20px;"> JS如何获取选中的值和文本？

8K4 0

select2 使用教程（简）「建议收藏」

我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式，界面效果如下所示。...2）编辑界面下的多项选择下拉列表但我们选择其中的内容的时候，系统自动显示出没有选择的列表数据，非常直观友好，如下所示。...的内容，是根据层次关系进行空格增加，从而实现了层次关系的显示。...4）select2控件的赋值处理上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。...我们从案例里面可以看到，Select2支持多项值的选择，它们保存后会以逗号分开，如果我们需要在编辑的时候显示存储的多个记录，那么需要把字符串转换为数组列表才能进行正确绑定，如下所示。

20.4K2 0

学习jQuery？这篇文章就够了

1、准备页面 2、练习五、jQuery 选择器 1、作用 2、选择器的组成 3、如何使用选择器获取元素六、基本选择器 1、基本选择器 1.1、id 选择器 1.2、元素选择器 1.3、类选择器...说明：这个就是直接选择 html 中的 id=“myDiv”。 1.2、元素选择器 Element，用法：$(“div”) 返回值元素集合。...说明：这个标签是直接选择 HTML 代码中 class=”myClass” 的元素或元素组（因为在同一 HTML 页面中 class 是可以存在多个同样值的元素）。...> 问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加 id 属性，再通过 id 选择器找...之后加入下面的代码 $(function () { // 问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加

12.2K1 0

与Ajax同样重要的jQuery（1）

, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式，对页面中元素进行选择...多个选择器同时使用 selector1,select2 例如： $("#xxid ,.xxxclass") 同时选择id 和 class匹配两类元素练习1： ² 通过each() 在每个div元素内容前...这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。...在动画完成时执行的函数 ④：内容过滤选择器内容选择器是对子元素和文本内容的操作 :contains(text) 选取包含text文本内容的元素 $("div:contains...： ² 为表单中所有隐藏域添加 class属性，值为itcast ² 设置table所有可见 tr 背景色黄色 ² 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值 <

10K6 0

jQuery Cheat—Sheet（jQuery学习笔记）

speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。...显示被隐藏的元素，并隐藏已显示的元素： //点击button隐藏p标签，再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出...**Chaining 允许我们在一条语句中运行多个 jQuery 方法**（在相同的元素上） ### jQuery 方法链接有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery...- 设置或返回所选元素的内容（包括 HTML 标记） - val() - 设置或返回表单字段的值下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容： $(“#btn1...- text() - 设置或返回所选元素的文本内容 - html() - 设置或返回所选元素的内容（包括 HTML 标记） - val() - 设置或返回表单字段的值下面的例子演示如何通过 text

16.2K3 0

基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用

我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式，界面效果如下所示。...的内容，是根据层次关系进行空格增加，从而实现了层次关系的显示。...4）select2控件的赋值处理上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。...控件赋值，让它显示对应值内容的项目，那么操作也就和上面的类似了。...我们从案例里面可以看到，Select2支持多项值的选择，它们保存后会以逗号分开，如果我们需要在编辑的时候显示存储的多个记录，那么需要把字符串转换为数组列表才能进行正确绑定，如下所示。

4.1K9 0

高质量编码--传感器数据同比

数据同比的效果如下 image.png 下面介绍其前端代码，先看html页面，使用boostrap作为样式和布局，引入了bootstrap-daterangepicker插件作为日期范围选择面板...，引入select2插件作为下拉选择列表，引入moment作为时间格式化工具，引入echarts作为图表库： <!...，所以要将返回的日期范围内的数据根据日期汇总 //又因为每一天的数据时间列不对齐，没有选择date类型的X轴,而使用value类型的X轴 //需要用moment将时间格式转换为时间戳数字类型...//然后自定义axisLabel，dataZoom 和tooltip的格式来将时间戳显示为时间。...echarts的图例,然后触发它们的选择和取消选择事件 $('#weekTable').delegate('button', 'click', function (item) {

1.4K0 0

Python开发物联网数据分析平台---web框架

利用tornado的模板作为主要的动态页面生成方式，以及巧妙使用模板将json数据渲染到页面hidden元素的值，然后在js中直接用eval函数计算隐藏域的值来生成图表JavaScript插件所需的json...数据来生成页面中相应的可视化图表。...基模板中包含完整的 HTML 结构和导航栏、页首、页脚都通用部分。在子模板里，我们可以使用 extends 标签来声明继承自某个基模板。...基模板中需要在实际的子模板中追加或重写的部分则可以定义成块（block）。块使用 block 标签创建， {% block 块名称 %} 作为开始标记， {% end %} 作为结束标记。...代码，主要实现搜索框点击搜索按钮时，页面根据搜索条件跳转url，以及根据当前页面url地址更新菜单栏当前菜单选中的样式。

3.1K3 0

一段探索React自建内部构造的旅程

这些方法叫做React组件的生命周期方法且会根据特定并可预测的顺序被调用。...getDefaultProps()方法被调用一次并缓存起来——在多个类实例之间共享。在组件的任何实例被创建之前，我们（的代码逻辑）不能依赖这里的this.props。...返回值将会被当成this.state的初始值，且必须是一个对象。现在我们来证明上面的猜想，实现一个显示的值可以被增加和减少的组件，基本上就是一个拥有“+”和“-”按钮的计数器。...为了验证这一点，让我们看看如何开发一个Select2库包裹（wrapper）React组件： var Select2 = React.createClass({ componentDidMount..._ref).select2('destroy'); }, ... 概述 React为我们提供了一种在创建组件时申明一些将会在组件生命周期的特定时机被自动调用的方法的可能。

1K4 0

JQuery基础

适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件；文档/窗口事件：load（元素已加载触发，在jQuery1.8中废除。...,callback); 可选的speed规定隐藏或显示的速度，取值可以为"slow","fast"或毫秒；可选的callback是隐藏或显示后执行的函数名称。　　...；fadeOut()：显示的元素淡出；fadeToggle()：切换fadeIn()和fadeOut()状态；fadeTo()：渐变为不透明度（opacity值在0~1之间）。　　...（不带参数） 6.jQuery链(chaining) 链：顾名思义，锁链，即一环套一环。 jQuery中将动作/方法链接在一起，因此，在相同元素上，我们可以在一条语句上运行多个jQuery方法。...html()：设置或获取所选元素的内容(包括HTML标记) val()：设置或获取表单字段的值 --　　获取属性： attr()：设置或获取属性值　　ps1：以上函数不传入参数时是获取；传入参数时是设置

4.6K5 1

jQuery 教程

") //匹配所有可见元素 :hidden选择所有隐藏的元素，如：$("div:hidden").show(3000)); :visible选择所有隐藏的元素，如： $("div:visible...特效效果：jQuery 效果 – 隐藏和显示 | 菜鸟教程 – 隐藏和显示 – 淡入淡出 – 滑动 – 动画 – 停止动画 – Callback 方法 – 链(Chaining) jQuery 效果方法...下面的例子演示如何获得链接中 href 属性的值： <!...jQuery animate() – 使用相关值演示如何在 jQuery animate() 方法中使用相关值。...jQuery val() – 获取值使用jQuery val() 方法获取表单的字段值。 jQuery attr() – 获取属性值使用jQuery attr() 方法获取属性值。

17K2 0

JQuery基本知识框架思维导图(上)

一：认识jQuery 1.window.onload与$(document).ready()的对比 2.jQuery代码风格（1:链式代码风格2：位代码添加注释） 3.jQuery...对象和DOM对象（1.DOM对象和jQuery对象简介2.DOM对象和jQuery对象互相转换）二：jQuery选择器 1.什么是jQuery选择器 2.jQuery选择器优势...3.jQuery选择器 1.基本选择器(5种#id，.class，element，*，select1....selectN) 2.层次选择器（4种$("div p"),$("...="a",div[id^="a",div[id$="a",div[id*="a",[select1][select2][selectN]）子元素过滤器（4种，$(div:nth-child...1.字符2.空格) 三：jQuery中的DOM操作 1.DOM操作的分类(3个方面1.DOM Core(核心)2.HTML-DOM3.CSS-DOM) 2.jQuery中的DOM操作(查找节点

6892 0

Web前端知识(四)

.jq中动画简介通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果,给用户一种全新体验. 4.1.9.2.jq中动画分类 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出...4.自定义动画 4.1.9.3.jq的显示与隐藏动画 hide()方法隐藏元素格式:hide(speed,callback)方法参数: speed,动画执行的速度要求传入一个毫秒值. 1秒等于...代码实战: 切换显示隐藏我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。...而 jQuery 提供给我们一个类似功能的独立方法: toggle() 方法用来切换显示隐藏代码实战: $("button").eq(2).click(function () { $("div...").toggle(1000);}); 【隐藏和显示以及切换动画总结】: Ø注意:在无参数的时候,只是硬性的显示内容和隐藏内容。

7.4K3 0

JQuery笔记

JQuery语法 (selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作...示例 (this).hide() - 隐藏当前元素("p").hide() - 隐藏所有段落 (".test").hide() - 隐藏所有 class="test" 的所有元素 JQuery选择器...效果隐藏/显示 hide(speed,callback) show(speed,callback) 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"...可选的 callback 参数是隐藏或显示完成后所执行的函数名称 toggle(speed,callback) 切换 hide() 和 show() 方法淡入淡出 fadeIn(speed...默认是 false JQuery HTML 捕获 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值

6.1K2 0

【一起来烧脑】读懂JQuery知识体系

背景在现在就业的过程中，会运用JQuery是你的加分项，那么什么是JQuery，嗯，jquery是JavaScript的函数库，是一种轻量级的JavaScript库，写得少，做的多，导致jQuery有很多技术人员在使用它做项目...='_blank']") 选取所有 target 属性值等于 "_blank" 的元素 jQuery 事件 jQuery事件处理方法是jQuery中的核心函数。...).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 隐藏/显示 hide()和show()方法来隐藏和显示HTML元素 $("#hide").click...，隐藏已显示的元素 $("button").click(function(){ $("p").toggle(); }); $(selector).toggle(speed,callback); jQuery...获取和jQuery 设置 text()--设置或返回所选元素的文本内容 html()--设置或返回元素的内容（包括HTML标记） val()--设置或返回表单字段的值 jQuery 添加元素 append

2.5K3 0

jQuery 快速入门教程

内容目录 jQuery 入门什么是jQuery 如何使用jQuery jQuery的运行原理如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心：选取元素...在jQuery库中实际上定义了一个jQuery()方法，它是jQuery库的核心。我们调用该方法并传入指定的参数，就可以返回一个jQuery实例对象，该对象中包含匹配的一个或多个DOM元素。...和CSS选择器一样，jQuery选择器也支持多个选择器任意组合使用。...元素 // 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素 $("p#uid"); // 选择id属性为"uid"的p元素 $("div.foo"); // 选择所有带有CSS类名"foo...$("selector").hide(); // 隐藏显示的元素，其用法与show()相同 $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与

13.6K3 0

根据select下拉框值判断验证条件

根据select下拉框值判断当前选中的是哪个区域，并且判断当前选中区域里面的值是否为空，如果为空，则弹出弹框提示，请输入xx区域名称，以下只是一个小demo,随手复制黏贴到代码里面，能看的更加明白。...select size="1" name="type" id="type" class="form-control select2...button type="button" class="btn blue" id="addBtn">保存 /* 下拉框选择...shouhou2").hide(); Dbtype = 'danger_fence'; } // 清空字段...$('#areaname1').val()){ // 如果这个值为空！

3.6K3 0

Web-第四天 jQuery学习

列举常见的五种选择器，并简单描述其作用通过选择器，获得jQuery对象学会给标签绑定事件可以实现显示或隐藏标签。.../js/jquery-1.11.0.js" type="text/javascript" > 基本语法：jQuery(选择器) 或 $(选择器) 及在 jQuery中 "jQuery...后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。...").fadeOut(3000); // 清空定时： clearInterval(time); } 1.4 选择器总结 1.4.1 基本选择器 jQuery后续的学习中，“基本选择器...=值] 获得属性名不等于值元素。 [...][...][...] 复合属性选择器，多个属性同时过滤。

3.5K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭