jQuery - список результатов на основе выбора выпадающего списка

Question

jQuery - список результатов на основе выбора выпадающего списка

0

Если вы выберете опцию из меню, она будет соответствовать другой соответствующей опции.

В первом меню, если вы выберете тип экзамена, он будет соответствовать соответствующему результату курса.

Кроме того, во втором меню вы можете выбрать курс, и будет отображен соответствующий результат экзамена.

Например, если вы выберете Американскую литературу или Введение в педагогическую психологию, результат будет бесплатным.

Однако, если в меню ниже вы выбираете Free Elective, единственный курс, который подходит, - это Американская литература, а не другое введение в педагогическую психологию.

Как выбрать Free Elective и отобразить список связанных классов, а не только один?

Вот мой JS...

$(function() {
    $('#clepSelector').change(function(){
        $('.class').hide();
        $('#' + $(this).val()).fadeIn();
    });
});

$(function() {
    $('#classSelector').change(function(){
        $('.clep').hide();
        $('#' + $(this).val()).fadeIn();
    });
});

webfrogs 22 окт. 2013, в 22:13

Источник

1

Примечание: вам не нужно 2 отдельных $(function () {}) (document.ready's). Вы можете все свои обработчики событий в одном.
Mark Pieszak - Trilon.io 22 окт. 2013, в 19:47
0

Хорошо. В сочетании с ответом Кришны ... это то, что мне было нужно. Спасибо @mcpDESIGNS!
webfrogs 22 окт. 2013, в 19:57

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Примечание: вам не нужно 2 отдельных $(function () {}) (document.ready's). Вы можете все свои обработчики событий в одном.
Хорошо. В сочетании с ответом Кришны ... это то, что мне было нужно. Спасибо @mcpDESIGNS!

Krishna · Accepted Answer · 2013-10-22T18-06-00.000Z

Во-первых, вы не можете иметь дубликаты идентификаторов в DOM.

Итак, удалите free_elective как id и сделайте его class.

HTML

<div class="clep free_elective" style="display: none"> American Literature </div>
<div class="clep free_elective" style="display: none"> Introduction to Educational Psychology </div>

JQuery

$('#classSelector').change(function(){
    $('.clep').hide();
    $('.' + $(this).val()).fadeIn();
});

JSFIDDLE DEMO

Отлично. Спасибо за вашу помощь @Krishna.