CODEWITHSUNDEEP
javascriptjqueryhtml
MailBlade
MailBlade

Reputation: 339

Div class not showing on dropdown select?

Good day

I require some aid with this issue.

I have a "Location1" dropdown with about 10 options. I then have a div class I would like to show if the user selects "Other".

Code:

<script>
$(document).ready(function(){
$("#Location1").on('change' function(){
 if (this.value == 'Other') {
 $(".otherlocation1").show();
}
else {
$(".otherlocation1").hide();
}
});
});
</script>

It's supposed to hide div class "otherlocation1" on by default, and then show "otherlocation1" based on a selection from the "Location1" text box.

Only problem is, it's not working. I've tried numerous other ways and can't get it working.

Any help would be appreciated.

Upvotes: 0

Views: 65

Answers (2)

Manish Poduval
Manish Poduval

Reputation: 452

In Jquery the on function takes two parameters.

  • events
  • handler

So when you call the on function you pass the event and the handler separated by a comma ',' . Refer this for more info.

Thus refactor your line as follows 

 $("#Location1").on('change', function()

Upvotes: 1

Ionut Necula
Ionut Necula

Reputation: 11472

You are missing a , after change. Try this:

$(document).ready(function() {
   $("#Location1").on('change', function() {
     if (this.value == 'Other') {
       $(".otherlocation1").show();
     } else {
       $(".otherlocation1").hide();
     }
   });
 });
.otherlocation1{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='Location1'>
  <option disabled selected>Select an option</option>
  <option value='Other'>Other</option>
  <option value='Other 2'>Other 2</option>
  <option value='Other 3'>Other 3</option>
  <option value='Other 4'>Other 4</option>
  <option value='Other 5'>Other 5</option>
</select>
<p class='otherlocation1'>otherlocation1</p>

Upvotes: 3

Related Questions