CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ABD
ABD

Reputation: 889

jQuery Show / Hide Div According to Option Select

I am trying to change the div according to the select box selectged item

Here is my JSFiddle

Here i have the following code

<select id="test" name="form_select">
   <option value="0" selected>No</option>
   <option value ="1">One</option>
   <option value ="2">Two</option>
   <option value ="3">Three</option>
</select>

<div id="first" style="display: none;">First Div</div>
<div id="second" style="display: none;">Second Div</div>
<div id="third" style="display: none;">Third Div</div>
<div id="none" style="display: none;">Nothing to Displayt</div>

And the JS To 

document.getElementById('test').addEventListener('change', function ()
{
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('none').style.display = style;
}
};

What i need is to display the Respective According to the Selection. The Event is wrote is not triggering... What is the mistake i am doing and how can i fix this ?

Upvotes: 1

Views: 372

Answers (6)

Sarath Kn
Sarath Kn

Reputation: 2725

here is the same using jquery

http://jsfiddle.net/h9h5858L/1/

Upvotes: 0

user2778823
user2778823

Reputation:

Use some thing like this

$('.statecontent').hide();
$('#myselector').change(function() {
    $('.statecontent').hide();
    $('.' + $(this).val()).show();    
});

<div class="statecontent state1">State1 Specific Page Content Goes here</div><br />
<div class="statecontent state2">State2 Specific Page Content Goes here</div><br />
<div class="statecontent state3">State3 Specific Page Content Goes here</div><br />

 <select id="myselector">
 <option value="state1">1</option>
 <option value="state2">2</option>
  <option value="state3">3</option>
 </select>

Here is Fiddle

Upvotes: 1

Blake Simpson
Blake Simpson

Reputation: 1088

This is how I would do it: http://jsfiddle.net/h7zb705q/10/

var mapping = {
    0: 'none',
    1: 'first',
    2: 'second',
    3: 'third'
};

var allItems = document.querySelectorAll('div');

document.getElementById('test').addEventListener('change', function () {
     var toShow = mapping[this.value];

     for(var i = 0; i < allItems.length; i++) {
        allItems[i].style.display = 'none';
     };

     document.getElementById(toShow).style.display = 'block';
});

Upvotes: 1

rishiAgar
rishiAgar

Reputation: 168

You have not put start and close curly braces after starting and you have written 

 document.getElementById('first').style.display = style;

two times, first time it should be none

Update Code:

document.getElementById('test').addEventListener('change', function (){ 
   {
      var style = this.value == 0 ? 'block' : 'none';
      document.getElementById('none').style.display = style;
   }
   {
      var style = this.value == 1 ? 'block' : 'none';
      document.getElementById('first').style.display = style;
   }
   { 
      var style = this.value == 2 ? 'block' : 'none';
      document.getElementById('second').style.display = style;
   }
   {
      var style = this.value == 3 ? 'block' : 'none';
      document.getElementById('third').style.display = style;
   }
});

Update JsFiddle

Upvotes: 1

Karan
Karan

Reputation: 3328

There was a minor syntactical error in the js code. Please find this updated fiddle.

JS Code -

document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('none').style.display =style;
style = this.value == 1 ? 'block' : 'none';

document.getElementById('first').style.display = style;

style = this.value == 2 ? 'block' : 'none';

document.getElementById('second').style.display = style;

style = this.value == 3 ? 'block' : 'none';

document.getElementById('third').style.display = style;
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You have syntactical errors in your code... then

var testel = document.getElementById('test');
testel.addEventListener('change', function() {
  testChange(this.value)
});
//initialize
testChange(testel.value)

function testChange(value) {
  document.getElementById('none').style.display = value == 0 ? 'block' : 'none';;
  document.getElementById('first').style.display = value == 1 ? 'block' : 'none';;
  document.getElementById('second').style.display = value == 2 ? 'block' : 'none';;
  document.getElementById('third').style.display = value == 3 ? 'block' : 'none';;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="test" name="form_select">
  <option value="0" selected>No</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<div id="first" style="display: none;">First Div</div>
<div id="second" style="display: none;">Second Div</div>
<div id="third" style="display: none;">Third Div</div>
<div id="none" style="display: none;">Nothing to Displayt</div>

Upvotes: 4

Related Questions