JQuery показать параметры с определенным классом, скрыть другие

Question

У меня есть два списка выбора.Оба заполняются с использованием php и mysql.Когда пользователь нажимает на организацию в первом списке, в списке событий должны отображаться только события для этой организации.Идентификатор организации - это значение параметров в списке организации и класс параметров в списке событий.

Когда я выбираю организацию 3, два события (A и B) должны отображаться в списке событий.Вместо этого все параметры события исчезают!Что-то не так с моим селектором для второго меню, но я слишком новичок в jQuery, чтобы понять это!

jQuery

$(document).ready(function() {
    $("#pick_org").change(function() {
        var org = $(this).val();
        $("#pick_event option").hide();
        $('#pick_event option .org-'+org).show();
    });
});

HTMLФорма

<form action="post" method="">
<label for="pick_org">1. Pick Organization</label>    
<select name="pick_org" id="pick_org">
    <option value="1">Org 1</option>
    <option value="2">Org 2</option>
    <option value="3">Org 3</option>
    <option value="4">Org 4</option>
    <option value="5">Org 5</option>
</select>

<label for="pick_event">2. Select Event</label>
<select name="pick_event" id="pick_event">
    <option value="A" class="org-3">Event A</option>
    <option value="B" class="org-3">Event B</option>
    <option value="C" class="org-5">Event C</option>
    <option value="D" class="org-1">Event D</option>
</select>
</form>

CSS опция #pick_org, опция #pick_event {display: block;}

Я загружаю оба списка, используя php, потому что моя цельУ аудитории не всегда включен JavaScript.; - (

Answer 1

Поскольку вы не можете на самом деле скрыть / показать параметры в Chrome, Safari и, я думаю, IE, я создал несколько плагинов Javascript для изменения параметров назад и вперед из скрытых входов при выборе организации, передавая необходимые атрибуты:

$.fn.changeToHidden = function () {
    this.each(function(i, ele) {
        var $ele = $(ele),
            $new = $('<input type="hidden">').attr('rel', $ele.html())
                                             .attr('value', $ele.attr('value'))
                                             .attr('class', $ele.attr('class'));
        $ele.parent().append($new);
        $ele.remove();
    });
};

$.fn.changeToOption = function () {
    this.each(function(i, ele) {
        var $ele = $(ele),
            $new = $('<option>').html($ele.attr('rel'))
                                .attr('value', $ele.attr('value'))
                                .attr('class', $ele.attr('class'));
        $ele.parent().append($new);
        $ele.remove();
    });
};

$("#pick_org").change(function() {
    var org = $(this).val();

    $("#pick_event option").changeToHidden();
    $('#pick_event input[type="hidden"].org-' + org).changeToOption();
});

Это должно помочь вам и работать во всех браузерах.

См. Рабочую демонстрацию →

Answer 2

Учитывая ваш HTML, оно должно быть:

$(document).ready(function() {
    $("#pick_org").change(function() {
        $("#pick_event option").hide();
        $('#pick_event option.' + $(this).val()).show();
    });
});