Using incremental class/names for multiple dropdown selects, target next one
<p>basically I have 6 dropdowns which ask the user a set of questions, the next dropdown will then show different questions based on the answers from the previous one. Not all dropdowns are used and the user may get the final answer by using only 4 of the 6 dropdowns. To keep the page neat and tidy i'm hiding all the dropdowns apart from the first, and only showing the next one if there's another question to be asked, if they have reached the answer then it is not shown. This is the code i'm using at the moment, and i'm just wondering if there's a neater way to do it using some sort of increment for the class name of the dropdown. </p>

<pre><code>&lt;select name="q1Select" class="q1Select"&gt;
&lt;option value="0"&gt;Is the property...&lt;/option&gt;
&lt;option value="1"&gt;Test 1&lt;/option&gt;
&lt;option value="2"&gt;Test 2&lt;/option&gt;
&lt;/select&gt;
&lt;select name="q2Select" class="q2Select"&gt;
&lt;option value="0"&gt;Is the property...&lt;/option&gt;
&lt;option value="1"&gt;Test 1&lt;/option&gt;
&lt;option value="2"&gt;Test 2&lt;/option&gt;
&lt;/select&gt;
&lt;select name="q3Select" class="q3Select"&gt;
&lt;option value="0"&gt;Is the property...&lt;/option&gt;
&lt;option value="1"&gt;Test 1&lt;/option&gt;
&lt;option value="2"&gt;Test 2&lt;/option&gt;
&lt;/select&gt;
&lt;select name="q4Select" class="q4Select"&gt;
&lt;option value="0"&gt;Is the property...&lt;/option&gt;
&lt;option value="1"&gt;Test 1&lt;/option&gt;
&lt;option value="2"&gt;Test 2&lt;/option&gt;
&lt;/select&gt;
&lt;select name="q5Select" class="q5Select"&gt;
&lt;option value="0"&gt;Is the property...&lt;/option&gt;
&lt;option value="1"&gt;Test 1&lt;/option&gt;
&lt;option value="2"&gt;Test 2&lt;/option&gt;
&lt;/select&gt;
&lt;select name="q6Select" class="q6Select"&gt;
&lt;option value="0"&gt;Is the property...&lt;/option&gt;
&lt;option value="1"&gt;Test 1&lt;/option&gt;
&lt;option value="2"&gt;Test 2&lt;/option&gt;
&lt;/select&gt;



&lt;script&gt;

// This code handles fading in the next question dropdown if the answer hasn't been answered yet.

$('.q1Select').change(function() {
var dropval = $(this).val();
var refsplit = dropval.split('-');
var ref1 = refsplit[0];
if (ref1 != "pump") {
$('.q2Select').fadeIn('slow')
}
});

$('.q2Select').change(function() {
var dropval = $(this).val();
var refsplit = dropval.split('-');
var ref1 = refsplit[0];
if (ref1 != "pump") {
$('.q3Select').fadeIn('slow')
}
});

$('.q3Select').change(function() {
var dropval = $(this).val();
var refsplit = dropval.split('-');
var ref1 = refsplit[0];
if (ref1 != "pump") {
$('.q4Select').fadeIn('slow')
}
});

$('.q4Select').change(function() {
var dropval = $(this).val();
var refsplit = dropval.split('-');
var ref1 = refsplit[0];
if (ref1 != "pump") {
$('.q5Select').fadeIn('slow')
}
});

$('.q5Select').change(function() {
var dropval = $(this).val();
var refsplit = dropval.split('-');
var ref1 = refsplit[0];
if (ref1 != "pump") {
$('.q6Select').fadeIn('slow')
}
});



// This code fades in the answer to the questions.

$('select').change(function() {
var test = $(this).val();
var refsplit = test.split('-');
var ref1 = refsplit[0];
var ref2 = refsplit[1]
if (ref1 == "pump") {
$('.answer').hide(); $('.answer.pump-' + ref2).fadeIn('slow'); }
else  $('.answer').fadeOut('slow');
});

&lt;/script&gt;
</code></pre>

<p>"pump" is the class assigned to an answer, so if a user gets their answer then it'll fade in the answer relating to their questions eg 'pump12'</p>

<p>Thanks in advance.</p>
