CODEWITHSUNDEEP
jquery
Ahmad Ajmi
Ahmad Ajmi

Reputation: 7281

Show & hide content based on select value

I have a this Html code

<select class="selectOption">
    <option>Analytics</option>
    <option>Translation</option>
    <option>Poll</option>
</select>

<div id="changingArea">
    <div id="Analytics" class="desc">Analytics</div>
    <div id="Translation" class="desc">Translation</div>
    <div id="Poll" class="desc">Poll</div>
</div>​

Css

.desc {display: none;}​

Js

$(function(){
      $('.selectOtion').change(function(){
        var selected = $(this).find(':selected').text();
        $(".desc").hide();
         $('#' + selected).show();
      });
});

The problem now it that all the div elements are hidden in page load. I want to show the first option value by default and when changed the div content is also change.

Example http://jsfiddle.net/bsqVm/

EDIT:

Thank you guys for your help

First there was a typo in my code, so 'selectOtion' should be 'selectOption'

Second to make the default select to show we can trigger the change event on DOMReady as 'undefined' solution

so the javascript is 

$(function(){
      $('.selectOption').change(function(){
        var selected = $(this).find(':selected').text();
        //alert(selected);
        $(".desc").hide();
         $('#' + selected).show();
      }).change()
 });

or 

 $(function(){
  $('#Analytics').show(); // Will show the div
  $('.selectOption').change(function(){
    var selected = $(this).find(':selected').text();
    //alert(selected);
    $(".desc").hide();
    $('#' + selected).show();
  });
 });

Upvotes: 2

Views: 8838

Answers (5)

Lachezar Raychev
Lachezar Raychev

Reputation: 2113

To be sure you will always show the correct div,better give value to all option,even it is the same as the text in the options,because if you have multiple languages "Analytics" on Spanish for example will have different text.so better make it like that:

<select class="selectOption">
    <option value="Analytics">Analytics</option>
    <option value="Translation">Translation</option>
    <option value="Poll">Poll</option>
</select>

$(function(){
      $('#Analytics').show(); // Will show the div
      $('.selectOption').change(function(){
        var selected = $(this).val(); //may store it in a variable
        //alert(selected);
        $(".desc").hide();
        //$('#'+selected).show();
        $('#' + $(this).val()).show(); //or u can just use obj value in selector to save coding
      });
});

Upvotes: 1

Niklas
Niklas

Reputation: 13155

You could add this line to show that div on load:

$(function(){
      $('#Analytics').show(); // Will show the div
      $('.selectOption').change(function(){
        var selected = $(this).find(':selected').text();
        //alert(selected);
        $(".desc").hide();
        $('#' + selected).show();
      });
});

Here's the DEMO

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74410

Try this: jsfiddle

Auto call event is often the simplest thing to do...

Upvotes: 3

rahul
rahul

Reputation: 7663

there is a typo in your code

$(function(){
      $('.selectOption').change(function(){
        var selected = $(this).find(':selected').text();
        $(".desc").hide();
         $('#' + selected).show();
      });
});

change $('.selectOtion') to $('.selectOption')

i have updated your fiddle working fine now have a look

http://jsfiddle.net/bsqVm/4/

Upvotes: 4

Ram
Ram

Reputation: 144729

There is a typo in your code selectOtion should be selectOption. For showing the the div according to selected value you can trigger the change event on DOMReady.

$(function(){
     $('.selectOption').change(function(){
         var selected = $(this).find(':selected').text();
         $(".desc").hide();
         $('#' + selected).show();
     }).change()
});

http://jsfiddle.net/XCUDF/

Upvotes: 4

Related Questions