У меня есть несколько вариантов в выборе. Если выбран вариант выбора, отобразится конкретный <div>
.Как показать соответствующий div при выборе опции с помощью jquery?
Вот мой 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>
Однако приведенный выше код работает только с последней опцией.
'Id' является недопустимым атрибутом для тега' option'. См. Https://developer.mozilla.org/en/docs/Web/HTML/Element/option – Mohammad