如何重写5个选择框的Jquery动态选择框脚本？

Question

我正在尝试使用Jquery创建动态选择框。

由于要求，我有5个选择框具有类似的内容，例如A班，B班，C班等。除了每个班级选择框之外，我还有5个学生选择框。

所以我的想法是，当我选择一个类选择框时，javascript将检查选择并继续使用GET操作发送选择值，并返回我的学生选择框的内容。

我已经有一个工作脚本。但它只适用于一个Class选择框，如果我需要为其他4个Class选择框运行，则必须使用不同的值创建4.js脚本。

我可以知道有什么方法可以使用1个js并适用于所有5个类选择框吗？也许一个循环，或者等等？

工作JS 1个选择框：

function class_change() { 
    $('#class1').change(update_students); 
     // the rest of the class sel boxes are named as #class2 #class3, etc. 
} 

function update_students() { 
    var class = $('#class1').val(); 
    var seat = $('#seat1').val(); 
    $.get('getStuds.php?seatno='+seat+'&class='+class, showStudents); 
} 

function showStudents(result) { 
    $('#show_student1').html(result); 
} 

$(document).ready(class_change); 

非常感谢你。

Answer 1

OK，让我们试试这个...

假设你有类似这样的标记每个组类：

<select id="c-1" class="classes"> 
<option>Class A</option> 
<option>Class B</option> 
</select> 
<select id="s-1" class="students"> 
<option>1</option> 
<option>2</option> 
</select> 
<div id="show-1"></div> 

然后修改你的代码有点

function class_change() { 
    $('.classes').change(update_students); 
    // set classname for all your class selectboxes to "classes" 
} 

function update_students() { 
    var classSelBox = $(this); 
    var className = classSelBox.val(); 
    var classID = classSelBox[0].id.split('-')[1]; // so we only need the number 1 in for example "c-1" 
    var seat = $('#s-' + classID).val(); 
    $.get('getStuds.php?seatno='+seat+'&class='+className, function(result) { 
     // lets use the power of closures here 
     showStudents(result, classID); 
    }); 
} 

function showStudents(result, id) { 
    $('#show-' + id).html(result); 
} 

$(document).ready(class_change); 

希望这有助于。