为多个下拉选择使用增量类/名称，目标下一个

Question

基本上，我有6个下拉菜单向用户提出一组问题，然后下一个下拉菜单将根据前一个答案显示不同的问题。不是所有的下拉菜单都可以使用，用户可以通过使用6个下拉菜单中的4个来获得最终答案。为了保持页面整洁，我隐藏了除第一个外的所有下拉菜单，并且只在下一个时才显示下一个，如果还有其他问题要问，如果他们已经达到了答案，那么就不会显示。这是我目前使用的代码，我只是想知道是否有一个更好的方法来使用某种类型的下拉类名称增量。

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



<script> 

// 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'); 
}); 

</script> 

“泵”是分配给一个答案类，因此，如果用户得到他们的答案，然后它会在与他们的问题如“pump12”

提前感谢答案褪色。

Answer 1

使用ID作为特定的唯一名称和使用类，使它们具有相同的名称。 所以，你必须与ID = “1” 级= “mySelect”

那么你可以通过

$('.mySelect').change(function(){ 
     $('.mySelect').each(function(){ 
     // Your code here 
     }); 
}); 

希望这有助于循环一个选择：“）

Answer 2

$('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'); 
     $(this).next('select').fadeIn('slow'); 
    } 
}); 

你可以得到摆脱所有的个人方法，并在下一次选择只是淡入。

如果你改变html，所以选择不直接相邻，那么你可以使用$(this).nextAll('select').first().fadeIn('slow');