showing one of 3 divs depending on which select is chosen

Question

I have a select box with 3 option body, strength, distance. I want to use javascript / jquery to show a div depending on which of those options is selected. so far I have just got it working on a button push http://codepen.io/Irish1/pen/iwKam

html

<form>
  <p>
    <label for="select">
      Goal Type
    </label>
    <select class="typeselect">
      <option value=""></option>
      <option value="body">
        Body
      </option>
      <option value="strength">
        Strength
      </option>
      <option value="distance">
        Distance
      </option>
    </select>
    <button class="toggle">push</button>
  </p>
  <div class="body">
    <p>
      <label for="body">
       Body
      </label>
    </p>
  </div>
  <div class="strength">
    <p>
      <label for="strength">
        Strength
      </label>
    </p>
  </div>
  <div class="distance">
    <p>
      <label for="distance">
       Distance
      </label>
    </p>
  </div>


</form>

css

.body {
  display: none;
}

.strength {
  display: none;
}

.distance {
  display: none;
}

javascript

$('.toggle').click(function(){
  $('.body').toggle();
});

Arun P Johny · Accepted Answer · 2013-12-23T17:16:20.950

4

Try

//dom ready handler
jQuery(function () {
    //all the elements that has to be shown/hidden, it is cached for easy access later
    var $targets = $('.body, .strength, .distance');

    //chang handler for the select element
    $('.typeselect').change(function () {
        //hide previously displayed elements
        $targets.hide()

        //find the element with the selected option's value as class, if empty option is selected set it to an empty set
        if (this.value) {
            $('.' + this.value).show()
        }
    })
})

Demo: Fiddle

If you want to make the button handler work then

//dom ready handler
jQuery(function () {
    //all the elements that has to be shown/hidden, it is cached for easy access later
    var $targets = $('.body, .strength, .distance');

    var $select = $('.typeselect');

    //click handler for the button
    $('.toggle').click(function (e) {
        //prevent the default form action of the button click
        e.preventDefault();

        //hide previously displayed elements
        $targets.hide()

        //selected value
        var val = $select.val();
        //find the element with the selected option's value as class, if empty option is selected set it to an empty set
        if (val) {
            $('.' + val).show()
        }
    })
})

Demo: Fiddle

edited Dec 23 '13 at 17:16

answered Dec 23 '13 at 16:59

Arun P Johny

384,651
66
527
531

Arun's does a similar thing to what I threw together for you: http://codepen.io/anon/pen/ktesh – michael t Dec 23 '13 at 17:04
@michaelt sorry... what did you mean – Arun P Johny Dec 23 '13 at 17:07
2

I forked @Irish's original code, made a few minor modifications, and have a working example: http://codepen.io/anon/pen/ktesh Only a few lines of jQuery and really minor mods to the dom. – michael t Dec 23 '13 at 17:10
@michaelt the only problem is when you select the empty option it will throw an error... handle that too then it is fine... but I will suggest you to cache the value of the selector `('.target')` – Arun P Johny Dec 23 '13 at 17:11
I'd even so so far as to remove the empty – michael t Dec 23 '13 at 17:16
@michaelt if the OP wants to give an option to select none then it has to be there – Arun P Johny Dec 23 '13 at 17:17
Sure. If the OP wants to do that, by all means. There's always other means of achieving the same end. – michael t Dec 23 '13 at 17:19

michael t · Answer 2 · 2013-12-23T18:57:25.047

3

$('#typeselect').change(function(event) {
   $('.target').hide();
   var option = $(this).val();
   if (option != "") $('.'+option).show();
});

and a few minor mods to the html

<form>
  <p>
    <label for="select">Goal Type</label>
    <select id="typeselect" class="typeselect">
      <option value=""></option>
      <option value="body">Body</option>
      <option value="strength">Strength</option>
      <option value="distance">Distance</option>
    </select>
  </p>
  <div class="body target">
    <p><label for="body">Body</label></p>
  </div>
  <div class="strength target">
    <p><label for="strength">Strength</label></p>
  </div>
  <div class="distance target">
    <p><label for="distance">Distance</label></p>
  </div> 
</form>

You can view and edit here at codepen: http://codepen.io/anon/pen/ktesh

edited Dec 23 '13 at 18:57

answered Dec 23 '13 at 17:13

michael t

390
3
11

can you make the corrections I updated in my comments – Arun P Johny Dec 23 '13 at 17:14
what corrections would that be? – michael t Dec 23 '13 at 18:54
I'm assuming you meant the blank option tag. I've added in a condition to test the value coming from the option. If it's not blank it'll show the corresponding
– michael t Dec 23 '13 at 19:00

Ringo · Answer 3 · 2013-12-23T17:12:55.290

0

Try this:

$('.typeselect').change(function(){
   $('div').hide();
   if($(this).val() == ""){
      $(this).children('option:first-child').show();
   }
   else
      $('.' + $(this).val()).show();
});

edited Dec 23 '13 at 17:12

answered Dec 23 '13 at 17:04

Ringo

3,795
3
22
37

1

it is not `$(this).value` either `$(this).val()` or `this.value` – Arun P Johny Dec 23 '13 at 17:06
Sorry about that! I have a confusion with javascript – Ringo Dec 23 '13 at 17:07
again it will throw an error if the empty option is selected – Arun P Johny Dec 23 '13 at 17:08
I think the option("" in this case) is selected by default. So I'll modify for this. – Ringo Dec 23 '13 at 17:11

score 0 · Answer 4 · answered Dec 23 '13 at 17:05

Give a name / Id to Select and Div's.

var x = document.getElementById("SelectId / Name").selected;

    if(x==0) {
        document.getElementById("body").style.display = "block";
    } else {
        \\ Similarly for other div to display on the basis of x
    }

showing one of 3 divs depending on which select is chosen

html

css

javascript

4 Answers4