item post div field hide and show on category - php

Question

I'am looking for a hide show script based on parentCatId and catId!
This is the div i try to hide and or show! div class="item-post-lot-area"
<div class="item-post-lot-area">
<label for="s_lotsize">
<?php _e('Lot Area', 'ctg_housing'); ?>
</label>
<div class="row collapse prefix-radius">
<div class="item-post-area-sign columns">
<span class="prefix"><?php echo osc_get_preference('metric','ctg_housing_theme'); ?></span>
</div>
<div class="item-post-area-number columns">
<input type="number" name="s_lotsize" id="s_lotsize" value="<?php if(isset($housingOut['s_lotsize'])) { echo $housingOut['s_lotsize'];} ?>" >
</div>
</div>
</div>
what i try!
item-post-lot-area field will all time show when loading the page! And will hide when selected the following parentCatId and catId
<option value="28">Vacation</option>
<select id="catId" name="catId" class="valid">
<option value="28">Select Subcategory</option>
<option value="29">Pension House</option>
<option value="30">Inn / Motel</option>
<option value="31">Hotel & Resort</option>
</option>
</select>
<select id="catId" name="catId" class="valid">
<option value="32">Select Subcategory</option>
<option value="33">Space</option>
<option value="34">Office</option>
<option value="35">BPO</option>
<option value="36">Economic</option>
</select>
Can someone explain me how to do this?
Thanks

Answer 1

You're probably looking along the lines of using .on("change") to run when the select element is changed. You can then check which value (if need be) has been selected, and then use $(".item-post-lot-area").hide() to hide the div.
$("#catId").on("change", function(){
$(".item-post-lot-area").hide();
});