如果选择了两个 Select2 选择则显示警报

Question

举例来说，我有两个 Select2 选择：

Select一个

选项 1 选项 2

SelectB

选项 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!")
    }
  })
})

问题是这个函数只比较两个选定值是否相等。当 selects 的两个选定值不同于默认值 'All' 时，我需要事件，但它们不一定必须是相等的值。

Answer 1

我没有测试下面的代码。只是一种伪代码来描述我在评论中的意思。

// Handler get data from two select and check them
function handler() {
    var data1 = $('#selectA').select2('data');
    var data2 = $('#selectB').select2('data');
    if (data1 && data2) {
        alert("msg you want to show");
    }
}

// trigger event only
$('#selectA').on('select2:select', function (e) { handler(); });
$('#selectB').on('select2:select', function (e) { handler(); });

Answer 2

问题在于您的条件。您需要检查 2 个选择是否 NOT 等于默认值 "All".

不等式/不等于运算符：!=。阅读有关表达式和运算符的更多信息 here.

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 示例 here.

如果选择了两个 Select2 选择则显示警报

Show alert if two Select2 selects are selected

javascript

jquery

jquery-select2

Select一个

SelectB