Andrew Vanusi Andrew Vanusi - 1 month ago 4
jQuery Question

Jquery hide dropdown list not working

Hi I have a small question.

I have 2 select form , and i want when i choose rental the employed type become hidden and here's my code :

<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>

<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>

$(function() {
var select = $('#Type-option');
select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
});


any idea ?

Answer

Few suggestions here 1. Never mix your mark up with your javascript.Consider binding events at javascript 2. I have modified your markup a bit,because when you hide employeetype u need to hide the label too

check the following snippet

$(document).ready(function(){
  var select = $('#Type-option');
  var employeeTypeOption=$('#employedType-option');
  var employedType=$('#employedType');
   select.on('change', function() {
    var selectOption=select.find('option:selected').val();
  if (selectOption == "rental") {
   employeeTypeOption.hide();
  employedType.hide();
  } else {
    employeeTypeOption.show();
    employedType.show();
  }
 });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Type</label>
 <select id="Type-option" class="form-control">
     <option value="employed">Employed</option>
     <option value="rental">Rental</option>
</select>

<span id="employedType">
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
     <option value="fulltime">FULLTIME</option>
     <option value="parttime">PARTTIME</option>
</select>
</span>

Hope this helps

Comments