Question

166

Want to show/hide div based on dropdown box selection

rated 0 times [ 171] [ 5] / answers: 1 / hits: 198496 / 11 Years ago, wed, february 5, 2014, 12:00:00

I want to have jQuery show div id='business' only if 'business use' is selected in the dropdown box.

This is my code:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>

</script>

<script>

$('#purpose').on('change', function() {

  if ( this.value == '1');

  {

    $(#business).show();

  }

  else

  {

    $(#business).hide();

  }

});

});

</script>

<body>

<select id='purpose'>

<option value=0>Personal use</option>

<option value=1>Business use</option>

<option value=2>Passing on to a client</option>

</select>

<div style='display:none;' id='business'>Business Name<br/>&nbsp;

<br/>&nbsp;

    <input type='text' class='text' name='business' value size='20' />

    <br/>

</div>

</body>

and the JSFiddle: http://jsfiddle.net/2kGzZ/1/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

turnerf

Add To Favorites

Follow

Total Points: 620

Total Questions: 101

Total Answers: 109

Location: French Polynesia

Member since Tue, Jul 7, 2020

4 Years ago

turnerf questions

1 Cannot read properties of undefined (reading 'display')

Thu, Oct 7, 21, 00:00, 3 Years ago

1 How should I import JSON in Node?

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to call a function every x seconds with updated state (React)

Tue, Jul 28, 20, 00:00, 4 Years ago

1 NestJS/swagger: what model is the ApiExtraModel expecting as a parameter?

Fri, Apr 10, 20, 00:00, 4 Years ago

1 TypeError: Cannot destructure property id of req.params as it is undefined

Sat, Apr 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago mariann · Accepted Answer

Wrap the code within $(document).ready(function(){...........}); handler , also remove the ; after if

$(document).ready(function(){

    $('#purpose').on('change', function() {

      if ( this.value == '1')

      //.....................^.......

      {

        $(#business).show();

      }

      else

      {

        $(#business).hide();

      }

    });

});

Fiddle Demo