CODEWITHSUNDEEP
javascriptjquery
Andrew Vanusi
Andrew Vanusi

Reputation: 499

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 ?

Upvotes: 0

Views: 2225

Answers (4)

caldera.sac
caldera.sac

Reputation: 5088

I think this is what you want. try the working demo

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>


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


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



<script type="text/javascript">
	
	$("#Type-option").on('change',function(){
		var theVal = $(this).val();//get the selected value

		if(theVal == "rental"){
			$("#emp").hide();
			$("#employedType-option").hide()
		}
		else{
			$("#emp").show();
			$("#employedType-option").show()
		}

	})

</script>

</body>
</html>

Upvotes: 0

Geeky
Geeky

Reputation: 7498

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

Upvotes: 1

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

I am not sure but i guess you have missed one of these otherwise your code is working fine

  • Add reference to jquery library

  • Wrap your jquery code inside script tag.

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

</script>

Upvotes: 0

Veer
Veer

Reputation: 6936

wrong syntax. check $(document).on.('action','selection',function(){}); signature.

Tyr with below code 

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

Upvotes: 0

Related Questions