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

Question

Is there a simple way  using JavaScript  to dynamically show hide content in a  lt div gt  based on the users selection from a drop down menu  For example  if a user selects option 1 then I would like  lt div gt  1 to be displayed and all other  lt div gt s to be hidden   EDIT  Example HTML Setup   lt select gt   lt option gt  Option 1 lt  option gt   lt option gt  Option 2 lt  option gt   lt option gt  Option 3 lt  option gt   lt select gt    lt div id  content 1  style  display hidden   gt Content 1 lt div gt   lt div id  content 2  style  display hidden   gt Content 2 lt div gt   lt div id  content 3  style  display hidden   gt Content 3 lt div gt

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

User · Answer

There are many ways to perform your task  but the most elegant are  I believe  using css  Here are basic steps   Listening option selection event  biding adding removing some class to container action  which contains all divs you are interested in  for example  body  Adding styles for hiding all divs except one   Well done  sir     This works pretty well if there a few divs  since more elements you want to toggle  more css rules should be written  Here is more general solution  binding action  base on following steps    1  find all elements using some selector  usually it looks like   menu-container  menu-item     2  find one of found elements  which is current visible  hide it   3  make visible another element  the one you desire to be visible under new circumstances   javascript it a rather timtoady language

User · Answer

I am not a coder  but you could save a few lines    lt div gt               lt select onchange  if selectedIndex  0 document getElementById  less is more   innerHTML options selectedIndex  value   gt                   lt option value    gt hire me for real estate lt  option gt                   lt option value  me     gt Who is a good Broker   lt  option gt                   lt option value  yes     gt Can I buy a house with no down payment lt  option gt                   lt option value  send me a note   gt Get my contact info  lt  option gt               lt  select gt           lt  div gt    lt div id  less is more  gt  lt  div gt    Here is demo

User · Answer

Meh too slow  Here s my example anyway    http   jsfiddle net cqDES     function            select   change function             var val     this  val            if  val                   div not  div    val        slideUp                    div    val  slideDown              else                  div   slideDown

User · Answer

The accepted answer has a couple of shortcomings    Don t target IDs in your JavaScript code  Use classes and data attributes to avoid repeating your code  It is good practice to hide with CSS on load rather than with JavaScript mdash to support non-JavaScript users  and prevent a show-hide flicker on load    Considering the above  your options could even have different values  but toggle the same class    lt select class  div-toggle  data-target   my-info-1  gt     lt option value  orange  data-show   citrus  gt Orange lt  option gt     lt option value  lemon  data-show   citrus  gt Lemon lt  option gt     lt option value  apple  data-show   pome  gt Apple lt  option gt     lt option value  pear  data-show   pome  gt Pear lt  option gt   lt  select gt    lt div class  my-info-1  gt     lt div class  citrus hide  gt Citrus is    lt  div gt     lt div class  pome hide  gt A pome is    lt  div gt   lt  div gt    jQuery     document  on  change     div-toggle   function       var target     this  data  target      var show      option selected   this  data  show        target  children   addClass  hide        show  removeClass  hide          document  ready function            div-toggle   trigger  change          CSS    hide     display  none      Here s a JSFiddle to see it in action

User · Answer

With zero jQuery  lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt  lt  title gt       lt  head gt       lt style gt   inv       display  none         lt  style gt       lt body gt           lt select id  quot target quot  gt               lt option value  quot  quot  gt Select    lt  option gt               lt option value  quot content 1 quot  gt Option 1 lt  option gt               lt option value  quot content 2 quot  gt Option 2 lt  option gt               lt option value  quot content 3 quot  gt Option 3 lt  option gt           lt select gt            lt div id  quot content 1 quot  class  quot inv quot  gt Content 1 lt  div gt           lt div id  quot content 2 quot  class  quot inv quot  gt Content 2 lt  div gt           lt div id  quot content 3 quot  class  quot inv quot  gt Content 3 lt  div gt                    lt script gt              document                  getElementById  target                    addEventListener  change   function                           use strict                       var vis   document querySelector   vis                               target   document getElementById this value                       if  vis     null                            vis className    inv                                             if  target     null                             target className    vis                                                  lt  script gt       lt  body gt   lt  html gt   Codepen  x000D   x000D  document    getElementById  target      addEventListener  change   function           use strict       var vis   document querySelector   vis             target   document getElementById this value       if  vis     null          vis className    inv             if  target     null           target className    vis             x000D   inv       display  none    x000D   lt  DOCTYPE html gt   lt html gt       lt head gt       lt meta charset  utf-8   gt           lt title gt  lt  title gt       lt  head gt       lt body gt           lt select id  target  gt               lt option value    gt Select    lt  option gt               lt option value  content 1  gt Option 1 lt  option gt               lt option value  content 2  gt Option 2 lt  option gt               lt option value  content 3  gt Option 3 lt  option gt           lt select gt            lt div id  content 1  class  inv  gt Content 1 lt  div gt           lt div id  content 2  class  inv  gt Content 2 lt  div gt           lt div id  content 3  class  inv  gt Content 3 lt  div gt       lt  body gt   lt  html gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms