After getting second select option value if second option value exist another div will hide-CodePudding

Actually, I am trying to hide div id="condition-description-sec" for the selected second option it's hiding, if I select another option but div id="condition-description-sec" not showing. How can I solve this issue please?

var optionValue = document.getElementById("condition-select")[1].value
console.log('test condition ' optionValue)
if(optionValue){ 
    $("#condition-description-sec").hide()
}else{
    $("#condition-description-sec").show()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name="condition_id" id="condition-select">
    <option value="">Select Condition</option>                 
    <option value="1000/New with tags" selected>New with tags</option>
    <option value="1500/New without tags">New without tags</option>
    <option value="1750/New with defects">New with defects</option>
    <option value="3000/Used">Used</option>
</select>

<div id="condition-description-sec">
  <p>Lorem ipsum dolor amet</p>
</div>

CodePudding user response：

You can use .change event to get the event. And I also split it into a function to check on page init.

$(document).ready(function(){
 
  // Declare function to check value to show/hide value
  var selectChangedFunc = function() {
    if ($('#condition-select').val() == '1000/New with tags') {
       $('#condition-description-sec').hide();
    } else {
       $('#condition-description-sec').show();
    }
  };

  // Call it on page loaded to make sure it hides on init.
  selectChangedFunc();

  // Capture change event to check status
  $('#condition-select').change(function() {
    selectChangedFunc();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name="condition_id" id="condition-select">
    <option value="">Select Condition</option>                 
    <option value="1000/New with tags" selected>New with tags</option>
    <option value="1500/New without tags">New without tags</option>
    <option value="1750/New with defects">New with defects</option>
    <option value="3000/Used">Used</option>
</select>

<div id="condition-description-sec">
  <p>Lorem ipsum dolor amet</p>
</div>