CODEWITHSUNDEEP
jqueryselectif-statement
Sam
Sam

Reputation: 6344

jQuery if statement for two select items

If two select elements are set to a "yes" I want a <div> to show. This code works for one of them but how do I add a second "if"?

<select id="select1">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select id="select2">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>

$('#select1').change(function() {
    if($(this).val() == 'Yes') {
        $('#divtest').show();
    }
});

Upvotes: 0

Views: 1529

Answers (4)

Starfish
Starfish

Reputation: 3574

You could do it like stated below. Every time you change the value of one of the two select fields, it checks if the values are both "Yes". If that's the case, it shows the div. When one (or both) of the fields are changed back to "No", it checks again. This results in a "Yes" and "No" thus it hides. Try it out:

$('#select1, #select2').on('change', function() {
  if ($('#select1').val() === 'Yes' && $('#select2').val() === 'Yes') {
    $('#divtest').show();
  } else {
    $('#divtest').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option value="No">No</option>
  <option value="Yes">Yes</option>
</select>
<select id="select2">
  <option value="No">No</option>
  <option value="Yes">Yes</option>
</select>

<div id="divtest" style="display:none;">TestDiv</div>

Upvotes: 0

Leo Javier
Leo Javier

Reputation: 1403

Here is a solution:

var a;
var b;

$('#select1').change(function() {
    a =$(this).val();
    if(a=='Yes' && b=='Yes') {
        alert('yes')   
    }
});

$('#select2').change(function() {
    b =$(this).val();
    if(a=='Yes' && b=='Yes') {
        alert('yes')   
    }
});

See the example here: https://jsfiddle.net/L25rean4/

Upvotes: 1

Toni Leigh
Toni Leigh

Reputation: 4971

You need to set a change event on both, then in that event check to see if both are set to yes:

<select id="select1" class='select'>
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select id="select2" class='select'>
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>

<div class='test'></div>

$('.select').change(function () {
    if ($('#select1').val() == 'Yes' && $('#select2').val() == 'Yes') {
        $('.test').addClass('yes');
    }
    else {
        $('.test').removeClass('yes');
    }
});

The jsfiddle here shows this in action.

Upvotes: 0

DZanella
DZanella

Reputation: 343

Try:

$('#select1').change(function(){
    test()});
$('#select2').change(function(){
    test()});

function test()
{
    if($('#select1').val() == 'Yes' && $('#select2').val() == 'Yes'){
        alert("test");}
}

Upvotes: 0

Related Questions