J'ai plusieurs options dans une sélection. Si l'option de sélection est sélectionnée, un affichage spécifique <div>s'affiche.
Voici mon html.
$(function() {
$("#reports").change(function() {
if ($("#subjects").is(":selected")) {
$("#subjects_form").show();
$("#classes_form").hide();
/* ... */
}
if ($("#classes").is(":selected")) {
$("#classes_form").show();
$("#subjects_form").hide();
/* ... */
}
if (...) {
...
} else {
$("#subjects_form").hide();
$("#classes_form").hide();
...
}
}).trigger('change');
});
.form { display: none }
<select class="form-control" id="reports">
<option selected="selected" disabled="disabled" value="">Select Report to print</option>
<option value="subjects" id="subjects">Subjects</option>
<option value="classes" id="classes">Classes</option>
<option value="teachers" id="teachers">Teachers</option>
<option value="students" id="students">Students</option>
<option value="departments" id="departments">Departments</option>
</select>
<div class="form" id="subjects_form">Subjects</div>
<div class="form" id="classes_form">Classes</div>
<div class="form" id="teachers_form">Teachers</div>
<div class="form" id="students_form">Students</div>
Cependant, le code ci-dessus ne fonctionne qu'avec la dernière option.
Idn'est pas un attribut valide pour la <option>balise. Utilisez l'attribut value au lieu de id et sélectionnez le div pertinent par celui-ci.
$("#reports").change(function() {
$(".form").hide();
$("#" + this.value + "_form").show();
}).trigger('change');.form { display: none }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="reports">
<option selected disabled value="">Select Report to print</option>
<option value="subjects">Subjects</option>
<option value="classes">Classes</option>
<option value="teachers">Teachers</option>
<option value="students">Students</option>
<option value="departments">Departments</option>
</select>
<div class="form" id="subjects_form">Subjects</div>
<div class="form" id="classes_form">Classes</div>
<div class="form" id="teachers_form">Teachers</div>
<div class="form" id="students_form">Students</div>
<div class="form" id="departments_form">Departments</div>Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots