在项目帖子上隐藏和显示div

I am a student and I have problems on item post. 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 &amp; 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

You can show or hide using Jquery,

<script>
$( "select" )
  .change(function() {
    $( "select option:selected" ).each(function() {
     $("#item-post-lot-area").hide();
    });

  })
</script>

check the link to know more https://api.jquery.com/selected-selector/