Javascript If Else Condition Not Working

Question

I show a result after an "if else" condition control selection. But I want show only one result if I change selected item in the second box. How can I solve this problem ?

For Example:

I should show result if I select first item from first select box AND I select second item from second select box (It's not a problem) AFTER

I should show result if I select second item from first select box AND I select second item from select box

But I showed first and second result at the same time. I only want to show one result at a time. I think my if else conditions are wrong.

function Compare(sel1, sel2) {
  if (sel1 == 'A' && sel2 == '1') {
    $('#first').show();
    $('#first1').prop('disabled', false);
  } else if (sel1 == 'A' && sel2 == '2') {
    $('#second').show();
    $('#second1').prop('disabled', false);
  }
}

var $sel1 = $("#sel1"),
    $sel2 = $("#sel2");


$("#sel1, #sel2").change(function() {
  Compare($sel1.val(), $sel2.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="form-group">
  <select class="form-control" id="sel1" name="sel1">
    <option selected> </option>
    <option value="A">A1 </option>
  </select>
</div>

<div class="form-group">
  <select class="form-control" id="sel2">
    <option selected> </option>
    <option value="1">1 </option>
    <option value="2" > 2 </option>
  </select>
</div>

<div class="form-group" id="first" style="display: none;">
  <input class="form-control" rows="1" name="first" id="first1" readonly value="'78'" disabled></div>
<div class="form-group" id="second" style="display: none;">
  <input class="form-control" rows="1" name="second" id="second1" readonly value="'78000'" disabled></div>

than hide the other

epascarello
– epascarello

2017-12-27 22:35:44 +00:00
Commented Dec 27, 2017 at 22:35 — epascarello
– epascarello, Commented Dec 27, 2017 at 22:35

jsanchezs · Accepted Answer · 2017-12-27 22:52:35Z

3

Hide the other control when you selected another :

function Compare(sel1, sel2) {
  if (sel1 == 'A' && sel2 == '1') {
    $('#first').show();
    $('#second').hide();
    $('#first1').prop('disabled', false);
  } else if (sel1 == 'A' && sel2 == '2') {
    $('#second').show();
    $('#first').hide();
    $('#second1').prop('disabled', false);
  }
}

var $sel1 = $("#sel1"),
    $sel2 = $("#sel2");


$("#sel1, #sel2").change(function() {
  Compare($sel1.val(), $sel2.val());
});

answered Dec 27, 2017 at 22:52

jsanchezs

2,0783 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

B. Fleming · Accepted Answer · 2017-12-27 22:38:10Z

0

You're showing elements, but never hide them again. You'll want to hide elements that you no longer wish to show, otherwise they will continue to display.

answered Dec 27, 2017 at 22:38

B. Fleming

7,2501 gold badge21 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript If Else Condition Not Working

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related