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 <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>

Yes there is. If you show what you've got so far, you might get some help. More sensible would be to learn the rudiments of Javascript and the DOM and learn to write it yourself, rather than relying on cut-and-paste code. — lonesomeday, May 28 '11 at 21:42
Hmm, well Im really just looking for a technique. If you read my question, I don't think I asked for a cut/paste piece of code, just a method. — Thomas, May 28 '11 at 21:45
The method is to create a listener on the dropdown menu for the `change` event, and then change the `display` style property for each of the `div` elements accordingly. — lonesomeday, May 28 '11 at 21:47

rybo111 · Answer 1 · 2016-12-15T12:51:12.050

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—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:

<select class="div-toggle" data-target=".my-info-1">
  <option value="orange" data-show=".citrus">Orange</option>
  <option value="lemon" data-show=".citrus">Lemon</option>
  <option value="apple" data-show=".pome">Apple</option>
  <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
  <div class="citrus hide">Citrus is...</div>
  <div class="pome hide">A pome is...</div>
</div>

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.

Any reason why my one won't seem to work? http://jsfiddle.net/fuvxkzkd/ - Strangely enough, the version running on my local site, does seem to work partially, but it doesn't add the 'hide' class to option elements if another is selected, so it just adds to the list of lines that's displayed — Lee, Dec 15 '15 at 10:25
@Lee If you check your JavaScript console, you will see `$ is not defined` which means jQuery has not been loaded on your fiddle. On JSFiddle, add `https://code.jquery.com/jquery-1.11.3.js` to External Resources on the left. — rybo111, Dec 15 '15 at 12:46
Ah. Wow I feel stupid, I thought JSfiddle automatically included it. Okay that'll be fine then. I managed to get my local version working fine too by the way, thanks. — Lee, Dec 15 '15 at 14:00

score 23 · Accepted Answer · edited Jul 20 '14 at 09:38

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

the jsfiddle doesn't work! returns 404. BTW jquary requires any compiler? — Ori Wiesel, Feb 28 '18 at 13:16

Ivan Ivanov · Answer 3 · 2020-11-03T09:44:38.697

With zero jQuery

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
        <select>

        <div id="content_1" class="inv">Content 1</div>
        <div id="content_2" class="inv">Content 2</div>
        <div id="content_3" class="inv">Content 3</div>
        
        <script>
            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';
                    }
            });
        </script>
    </body>
</html>

Codepen

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

.inv {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
        <select>

        <div id="content_1" class="inv">Content 1</div>
        <div id="content_2" class="inv">Content 2</div>
        <div id="content_3" class="inv">Content 3</div>
    </body>
</html>

how do i make this work if i have to select two drop down to make the text change — Ankita Basu, Nov 07 '22 at 13:35

Andy · Answer 4 · 2014-07-20T09:23:05.360

8

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

edited Jul 20 '14 at 09:23

answered May 28 '11 at 21:49

Andy

29,707
9
41
58

Might want to hide the elements on load in your fiddle. – rybo111 Jul 20 '14 at 10:36
@rybo111 Yeah I could, but then if you select the empty option it shows them all again so it could be a feature. – Andy Jul 20 '14 at 14:27
The OP hid them on load in his question, so that was the desired effect. – rybo111 Jul 21 '14 at 18:08

score 2 · Answer 5 · answered Jul 22 '19 at 07:41

I am not a coder, but you could save a few lines:

<div>
            <select onchange="if(selectedIndex!=0)document.getElementById('less_is_more').innerHTML=options[selectedIndex].value;">
                <option value="">hire me for real estate</option>
                <option value="me!!!">Who is a good Broker? </option>
                <option value="yes!!!">Can I buy a house with no down payment</option>
                <option value="send me a note!">Get my contact info?</option>
            </select>
        </div>

<div id="less_is_more"></div>

Here is demo.

score -1 · Answer 6 · answered May 28 '11 at 21:52

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 )

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

6 Answers6

Linked

Related