jQuery的节目具有一定的类选项，隐藏其他 [英] jquery show options with a certain class, hide others

问题描述

我有两个选择列表。两者都使用PHP和MySQL填充。当用户点击在第一个列表的组织，只有该组织的活动应该会显示事件列表。该组织id是在组织列表中的选项的价值，并在事件列表中的选项的类

I have two select lists. Both are populated using php and mysql. When the user clicks on an organization in the first list, only events for that organization should show in the events list. The organization id is the value of the options in the organization list and the class for the options in the event list.

当我选择组织3，两个事件（A和B）应显示在事件列表中。相反，所有事件选项消失！一定有什么毛病我选择第二个菜单，但我太新了jQuery看着办吧！

When I choose organization 3, two events (A and B) should show in the event list. Instead, all the event options disappear! Something must be wrong with my selector for the second menu but I'm too new to jQuery to figure it out!

的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选项{显示：块;}

CSS #pick_org option, #pick_event option{display:block;}

我使用PHP，因为我的目标受众并不总是必须启用JavaScript加载两份名单。 ; - （

I'm loading both lists using php because my target audience doesn't always have JavaScript turned on. ;-(

推荐答案

既然你不能真正隐藏的Chrome，Safari浏览器/显示选项，我认为IE浏览器，以及，我创造了一些JavaScript插件更改的选项回第四，从组织后选择隐藏的输入，传输必要的属性：

Since you can't actually hide/show options in Chrome, Safari, and I think IE as well, I created some Javascript plugins to change the options back and forth from hidden inputs upon organization selection, transferring the necessary attributes:

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

这应该做的伎俩为您和跨浏览器的工作。

This should do the trick for you and work across browsers.

查看工作演示＆＃x2192;

这篇关于jQuery的节目具有一定的类选项，隐藏其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！