Question

I want to hide and show a div based on a drop down selection. That is if I select drop down option 1, div with the id 1 should show up, and for 2 div with id 2 and so on. But I want to do this without using jQuery but with css or Javascript. Is this possible? Heres my sample drop down. Thanks guys.

<select name="options">
  <option value="1"> Loan Protection Insurance</option>
  <option value="2"> GAP or Cash Assist Insurance</option>
  <option value="3"> Home Insurance</option>
  <option value="4"> Landlords Insurance</option>
  <option value="5">  Car Insurance</option>
</select>

<div id="1">Test</div>
<div id="2">Test</div>

Answer 1

Not possible with CSS alone as you need to handle the change event of the drop down and take appropriate action.

You can do it easily via pure JS:

document.getElementById('id-of-select').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

Demo: http://jsfiddle.net/2ukyA/

---

Update: If IDs of the DIVs are like “divname1” etc..

document.getElementById('id-of-select').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById("divname" + i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById("divname" + ++i);
    }
    document.getElementById(this.value).style.display = 'block';
};