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