CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Cheknov
Cheknov

Reputation: 2082

Show alert if two Select2 selects are selected

Let's say for example that I have two Select2 selects:

Select A

Option 1 Option 2

Select B

Option 1 Option 2

I want to capture an event when some option has been chosen for Select A and some option for Select B and then show a dismissible alert like alert alert-warning alert-dismissible fade show

I had thought to do it capturing the focus event but I have not been able to implement it, any ideas?

<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>

I would like to implement something like this:

$(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!")
    }
  })
})

The problem is that this function only compares if the two selected values are equal. I need and event for when the two selected values of the selects are different than the default value 'All', but they don't necessarily have to be equal values.

Upvotes: 1

Views: 694

Answers (2)

Martin
Martin

Reputation: 2424

The problem lies within your conditional. You need to check whether the 2 selects are NOT equal to the default value "All".

inequality / not equal operator: !=. Read more about expressions and operators 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"');
    }
});

Snippet:

$('.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 example here.

Upvotes: 2

MarshalSHI
MarshalSHI

Reputation: 625

I didn' test the code below. Just a kind of pseudo-code to describe what I meant in the comment.

// 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(); });

Upvotes: 0

Related Questions