javascript - 如果选择了两个 Select2 选项,则显示警报
问题描述
例如,假设我有两个 Select2 选择:
选择一个
选项 1 选项 2
选择 B
选项 1 选项 2
当为 Select A 选择了某个选项并为 Select B 选择了某个选项时,我想捕获一个事件,然后显示一个可关闭的警报,例如alert alert-warning alert-dismissible fade show
我曾想过要捕获焦点事件,但我无法实现它,有什么想法吗?
<label style="font-size: 20px;">SELECT A </label>
<select id="selectA" class="form-control" disabled>
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<label style="font-size: 20px;">SELECT B </label>
<select id="selectB" class="form-control" disabled>
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
我想实现这样的事情:
$(function () {
'use strict';
$('.dropdown').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.dropdown').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("Alert Alert!")
}
})
})
问题是这个函数只比较两个选定的值是否相等。我需要和事件,因为何时选择的两个选择值与默认值“ all”不同,但它们不一定是相等的值。
解决方案
问题出在您的有条件的. 您需要检查 2 个选择是否不等于默认值"All"。
不等式/不等式运算符:!=
. 在此处阅读有关表达式和运算符的更多信息。
HTML:
<div class="row d-flext justify-content-center">
<div class="col-md-4">
<label style="font-size: 20px;">SELECT A </label>
<select id="selectA" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="col-md-4">
<label style="font-size: 20px;">SELECT B </label>
<select id="selectB" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
jQuery:
$('.multi-select').on("change", function() {
var selectValA = $('#selectA').val();
var selectValB = $('#selectB').val();
if(selectValA != "All" && selectValB != "All") {
alert('The value of the two selects are no longer "All"');
}
});
片段:
$('.multi-select').on("change", function() {
var selectValA = $('#selectA').val();
var selectValB = $('#selectB').val();
if(selectValA != "All" && selectValB != "All") {
alert('The value of the two selects are no longer "All"');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row d-flext justify-content-center">
<div class="col-md-4">
<label style="font-size: 20px;">SELECT A </label>
<select id="selectA" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="col-md-4">
<label style="font-size: 20px;">SELECT B </label>
<select id="selectB" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
Codepen 示例在这里。
推荐阅读
- c# - 通过传递要在实体框架中动态过滤的列来选择列上的不同值
- java - 无法将变量传递给其他类
- r - 有子集数据,需要在不使用 ggplot 的同一散点图上绘制两者
- sql-server - 在 LIKE '%' + @variable 中使用变量会导致错误结果
- java - Spring 5 缓存不适用于@Cachable(CacheInterceptor 不在调用堆栈中)?
- database - Laravel更新-图像上传的文件路径未存储在数据库中
- sql - 在 SQL 查询中乘以一个答案(大于)
- r - 返回包含至少一个满足条件的元素的行——使用 dplyr::filter 在多列上迭代——过滤并应用
- google-bigquery - Google BigQuery-时区转换
- vb.net - 单击最大化按钮时放大表单控件