Question

105

Change the content of a div based on selection from dropdown menu

rated 0 times [ 108] [ 3] / answers: 1 / hits: 134668 / 13 Years ago, sat, may 28, 2011, 12:00:00

Is there a simple way, using JavaScript, to dynamically show/hide content in a <div> based on the users selection from a drop down menu? For example, if a user selects option 1 then I would like <div> 1 to be displayed and all other <div>s to be hidden.

EDIT: Example HTML Setup

<select>

<option> Option 1</option>

<option> Option 2</option>

<option> Option 3</option>

<select>



<div id=content_1 style=display:hidden;>Content 1<div>

<div id=content_2 style=display:hidden;>Content 2<div>

<div id=content_3 style=display:hidden;>Content 3<div>

Answers

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

gordonrockym

Add To Favorites

Follow

Total Points: 95

Total Questions: 115

Total Answers: 95

Location: Iraq

Member since Sat, Apr 16, 2022

2 Years ago

answered 13 Years ago raymondd · Accepted Answer

here is a jsfiddle with an example of showing/hiding div's via a select.

HTML:

<div id=option1 class=group>asdf</div>

<div id=option2 class=group>kljh</div>

<div id=option3 class=group>zxcv</div>

<div id=option4 class=group>qwerty</div>

<select id=selectMe>

  <option value=option1>option1</option>

  <option value=option2>option2</option>

  <option value=option3>option3</option>

  <option value=option4>option4</option>

</select>

jQuery:

$(document).ready(function () {

  $('.group').hide();

  $('#option1').show();

  $('#selectMe').change(function () {

    $('.group').hide();

    $('#'+$(this).val()).show();

  })

});