I'm encountering an issue with hiding a div using select and onchange function. Even though the jQuery function I've written is correctly showing and hiding the div based on select option values, when I revisit the page, the div is still displayed even if the select option should hide it.
Is there a way to check the value of the select option when the page loads and adjust the display of the div accordingly?
Below is my HTML code snippet:
<select name="cancelation" class="dropdown">
<option value="refundable">Refundable</option>
<option value="non-refundable">Non-Refundable</option>
</select>
<div class="row cancelationDaysRow">
<span class="no-margin-left">Up to</span>
<div class="input-holder"><input name="cancelationDays" id="cancelation"
title="<?php echo $this->__('Cancelation days') ?>"
placeholder="<?php echo $this->__('30') ?>" value="30"
class="input-text input-text_inner" type="text"
onkeyup="this.value=this.value.replace(/[^\d]/,'')" maxlength="3"/>
</div>
<span>days before the starting date of this tour</span>
</div>
Here is the jQuery function I'm using:
l$('#addTourForm select[name="cancelation"]').on('change', function(){
$value = l$(this).val();
//console.log($value);
if($value == 'refundable'){
l$('.cancelationDaysRow').css('display', 'inline-block');
}else{
l$('.cancelationDaysRow').css('display', 'none');
}
});
UPDATE When changing the select values, I encountered an error in the console: Uncaught SyntaxError: Unexpected token .ListPicker._handleMouseUp @ about:blank:502