如何重寫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); 

希望這有助於。