jQuery - hide element until option selected

0 votes
253 views
added Aug 16, 2018 in jQuery by LC Marshal Captain (25,790 points)
<select class="form-control form-select" id="units-available">
	<option value="0">-- View available units ---</option>
</select>

<div id="unit-selection">
  <div class="extra-row selunit">
    <div class="col-xs-6 extra-left">Floorplan type</div>
    <div class="col-xs-6 rangeval floor_type">-NA-</div>
  </div>
  <div class="extra-row selunit">
    <div class="col-xs-6 extra-left">Built-up area (sqft)</div>
    <div class="col-xs-6 rangeval size">-NA-</div>
  </div>
  <div class="extra-row border-bottom-1 selunit">
    <div class="col-xs-6 extra-left">Layout</div>
    <div class="col-xs-6 rangeval roomtype">-NA-</div>
  </div>
  <!-- separator -->
  <div class="extra-row selunit">
    <div class="col-xs-6 extra-left">Property Price</div>
    <div class="col-xs-6 rangeval actual_price">-NA-</div>
  </div>

  <div class="extra-row border-bottom-1">
    <div class="col-xs-6 extra-left">Funds Commited</div>
    <div class="col-xs-6 rangeval commited">-NA-</div>
  </div>

  <?php if($unit_ops == 'buy'):?>
  <div class="row extra-primary m-bottop border-bottom-1 selunit">
        <span class="pto-label">Pay to own:</span>
        <span class="cto-result cost_to_own">-NA-</span>
        <!--span class="day-left">x days left to buy</span-->
  </div>
  <?php else:?>
    <div class="row extra-primary m-bottop border-bottom-1 selunit">
      <div class="form-group investing-amt col-xs-12">
        <select class="form-control form-select" id="investing-amt">
          <option value="0">-- How much to Invest---</option>
          <?php for($i = 5000; $i <= 200000; $i=$i+5000){ ?>
            <option value="<?php print $i; ?>">RM <?php print number_format($i);?></option>
          <?php } ?>
        </select>
      </div>
    </div>
  <?php endif;?>


  <?php if($unit_ops == 'buy'):?>
  <div>
    <div class="form-checkboxes form-inline tcbox">
      <div class="form-type-checkbox checkbox">
        <label for="qf-buyer" class="control-label">
          <input type="checkbox" id="qf-buyer" class="form-checkbox"> I confirm that I meet all eligibility criteria for this project
        </label>
      </div>
    </div>
  </div>
  <button class="btn btn-primary btn-block disabled nobuy procced_pay" id="buynow">Reserve Unit Now</button>
  <?php else:?>

  <button class="btn btn-primary btn-block disabled procced_pay" id="investnow">Invest Now</button>
  <?php endif;?>
  <a class="tell-me-more" href="#">Tell me more about this unit</a>
</div>

<script>
	(function($){
	$('#units-available').change(function(){
      $('#unit-selection').show();
    });
    })(jQuery);
</script>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...