Comment réécrire le script de boîte de sélection dynamique Jquery pour 5 zones de sélection?

Question

J'essaye de créer des boîtes de sélection dynamiques avec Jquery.

En raison des exigences, j'ai 5 boîtes de sélection avec des contenus de classe similaires, par ex. Classe A, Classe B, Classe C, etc. J'ai 5 autres cases de sélection Étudiant en plus de chacune des cases de sélection de Classe. Donc, l'idée est que lorsque je sélectionne une boîte de sélection de classe, javascript va vérifier la sélection et continuer à envoyer la valeur de sélection en utilisant l'action GET, et retourner le contenu pour ma boîte de sélection Étudiant.

J'ai déjà un script de travail. Mais il ne fonctionne que pour une boîte de sélection de classe, et si j'ai besoin de l'avoir en cours pour le reste des 4 boîtes de sélection de classe, je vais devoir créer un script 4.js avec les différentes valeurs. Puis-je savoir s'il est possible de simplement utiliser 1 js et de travailler pour toutes les boîtes de sélection de 5 classes? Peut-être une boucle, ou etc?

travail js 1 boîte de sélection:

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); 

Merci beaucoup.

Answer 1

ok, nous allons essayer cette ...

disons que vous avez votre balisage comme celui-ci pour chaque ensemble de classes:

<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> 

puis modifiez votre code un peu

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); 

Espoir CA aide.