Jquery hide dropdown list not working

Question

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 ?

It is working properly. I don't get any issue. Check this- jsfiddle.net/4vopp97z — Developer107
– Developer107, Commented Oct 21, 2016 at 4:52
What's the error? I got your code running here: jsfiddle.net/p2tz02qf — user2345
– user2345, Commented Oct 21, 2016 at 4:52
@hi, its not working here in my local. nothing error. any idea ? — Andrew Vanusi
– Andrew Vanusi, Commented Oct 21, 2016 at 4:56

Geeky · Accepted Answer · 2016-10-21 05:01:06Z

1

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

answered Oct 21, 2016 at 5:01

Geeky

7,5142 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Geeky Over a year ago

cool...If it is of any help,please consider accepting answer :)

Andrew Vanusi Over a year ago

why I add condition like this, not working. else if (select.val() == "employed" || "parttime"){ $('#employedType-option').show(); $('#employedType').show(); $('#basic-salary').hide(); $('#hourly-rate').show();

Andrew Vanusi Over a year ago

why I add condition like this, not working. else if (select.val() == "employed" || "parttime"){ $('#employedType-option').show(); $('#employedType').show(); $('#basic-salary').hide(); $('#hourly-rate').show();

Geeky Over a year ago

parttime is of employedType-option box.you cannot check it on select.val() .change the if condition to ( selectOption=="employed") || $("#employedType-option option:selected").val()=="parttime") .but a question here ,by default employed dropdown would be visible. When it is hidden by previous if condition how can check if it is parttime or not

Andrew Vanusi Over a year ago

the issue is to long too explain it in here. can we have a small chit chat ?

Veer · Accepted Answer · 2016-10-21 04:56:32Z

0

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();
 }
 });

answered Oct 21, 2016 at 4:56

Veer

7,1461 gold badge16 silver badges13 bronze badges

Comments

Mairaj Ahmad · Accepted Answer · 2016-10-21 04:56:43Z

0

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>

answered Oct 21, 2016 at 4:56

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

2 Comments

Andrew Vanusi Over a year ago

it's inside script Wrap. and I've added bootstrap jquery.

Mairaj Ahmad Over a year ago

See your console you must be getting $ is not defined

caldera.sac · Accepted Answer · 2016-10-21 05:02:40Z

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>

Collectives™ on Stack Overflow

Jquery hide dropdown list not working

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related