Using Div and Hide option in simple html - html

Question

I'm using html. I have to display a set of questions in a form when an option is selected from a drop down.
I already have a working script. Wen I duplicated it and edited it for my requirements its not working.
var selVal = ele.options[ele.selectedIndex].value;
for example given below is the list from the dropdown. When option 1 is selected it should display a set of questions and when option 2 is selected it should display a diff set of questions.
<div id='q1'>
<b> Where is the caller from ? </b>
<select id="category" onChange="selDivision(this)">
<option value="1">Store</option>
<option value="2" >Office</option>
</select>
<br />
<br />
All the form contents are displayed instead of my requirements.
First should display only the dropdown,once selected an option the question set has to be display below.
I using simple js scripts for use as backend.
Requiring further assistance on this.
part of code that is for the hide and display function
$(document).ready(function(){
//init();
//$("#q1b").hide();
$("#1q").hide();
$("#2q").hide();
$("#3q").hide();
$("#4q").hide();
$("#5q").hide();
$("#6q").hide();
$("#7q").hide();
$("#8q").hide();
$("#9q").hide();
$("#10q").hide();
$("#1a").hide();$("#1b").hide();$("#1c").hide();$("#1d").hide();$("#1e").hide();$("#1f").hide();$("#1g").hide();
$("#2a").hide();$("#2b").hide();$("#2c").hide();$("#2d").hide();$("#2e").hide();$("#2f").hide();$("#2g").hide();
setDisabled('q1',false);
setDisabled('1q',false);
setDisabled('2q',false);
setDisabled('3q',false);
setDisabled('4q',false);
setDisabled('5q',false);
setDisabled('6q',false);
setDisabled('7q',false);
setDisabled('8q',false);
setDisabled('9q',false);
setDisabled('10q',false);
clear_form_elements(document.getElementById('test'));
});
function selDivision(ele)
{
var selVal = ele.options[ele.selectedIndex].value;
if(selVal == "1")
{
$('#1q').show(); setDisabled('q1',true);
$("#1a").show();$("#1b").show();$("#1c").show();$("#1d").show();$("#1e").show();$("#1f").show();$("#1g").show();
}
if(selVal == "2" )
{
$('#2q').show(); setDisabled('q1',true);
$("#2a").show();$("#2b").show();$("#2c").show();$("#2d").show();$("#2e").show();$("#2f").show();$("#2g").show();$("#2h").show();$("#2i").show();
}
Val=selVal;
}
</script>
</head>
q1 q2 are the questions fro drop down
The other variables are the questions under the option.

Answer 1

Try like this
<div id='questions' style="display:none">
<div id='q1' style="display:none">
<b> Question 1? </b>
<b> a. ans1</b>
<b> b. ans2</b>
<b> c. ans3</b>
</div>
<div id='q2' style="display:none">
<b> Question 2 ? </b>
<b> a. ans1</b>
<b> b. ans2</b>
<b> c. ans3</b>
</div>
</div>
<select id="category">
<option value="0">-select-</option>
<option value="1">Store</option>
<option value="2" >Office</option>
</select>
<br />
<script>
$('#category').on("change",function() {
//Hide all Questions in first time
$('#questions div').hide();
//get selected value
var id=$('#category').val();
//display
$('#questions').show();
$('#q'+id).show();
});
</script>
Here working example http://jsfiddle.net/d1udL1cr/