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选项，＃patch_event选项{display：block;}

我正在使用php加载这两个列表，因为我的目标受众并不总是启用JavaScript。 - （

Answer 1

由于你无法在Chrome，Safari中实际隐藏/显示选项，我认为IE也是如此，我创建了一些Javascript插件，可以在组织选择时从隐藏输入中来回更改选项，传输必要的属性： / p>

$.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();
});

这应该为您提供技巧并跨浏览器工作。

See working demo →

Answer 2

鉴于您的HTML，它应该是：

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

jquery显示某个类的选项，隐藏其他类

2 个答案: