jQuery 每个函数 $(this) 混淆

Question

EXPLANATION: 我有两个元素，里面有很多选项。 第一个包含一系列以 db-id 作为值的选项。这些是父母。

第二个元素填充了一个选项列表，这些选项以它们的父 db-ids 作为它们的值，它们自己的 db-ids 作为它们的 html id-attribute。这些是子类别。

问题： 我想让所有子猫都被隐藏，并且在任何父类别的每个选择事件上，相关子项变得可见，使用与父项值相同的值。

我的尝试： 为此，我编写了以下不起作用的脚本。它将一个点击事件附加到每个父类别，并且该事件触发一个函数，如果它们的值与被点击元素的值匹配，则该函数负责打开任何子猫的可见性。

HTML 代码：

<select multiple  name="branch" >
<option selected="" value="false">Please Select a Branch</option>
<option class="branch-item" value="0">Computer</option>
<option class="branch-item" value="1">Automobile</option>
<option class="branch-item" value="4">Technical</option>
</select>   

<select multiple class="form-option" name="subbranch" >
<option class="subbranch-item" style="display: none;" value="1">Software</option>
<option class="subbranch-item" style="display: none;" value="1">Hardware</option>
<option class="subbranch-item" style="display: none;" value="7">Mechanics</option>
<option class="subbranch-item" style="display: none;" value="7">Welding</option>   
</select>

JQUERY 代码：

<script type="text/javascript">
    $(document).ready(function(e) {

        $(".branche-item").click(function(){
            var values = $(this).val();
            $('.subbranch-item').parent().each(function(element, value) {
                if(value == values)
                {
                    element.show(); 
                }
            });
        });

    });
</script>

感谢任何有关调试 jquery 代码的帮助，谢谢

Answer 1

$('select[name="branch"]').change(function () {
    var $branch = $(this).children(':selected'),
        $subbranch = $('[name="subbranch"]').children('option');

    $subbranch.hide()

    $branch.each(function () {
        var branch = $(this).val();
        $subbranch.each(function () {
            if ($(this).val() == branch) {
                $(this).show();
            }
        });
    });
}).change();

http://jsfiddle.net/F9777/3/

Answer 2

试试

var $sub = $('select[name="subbranch"]');
var sub = $.trim($sub.html());

$('select[name="branch"]').change(function () {
    var filter = $(this).children('option:selected').map(function () {
        return '[value="' + this.value + '"]'
    }).get().join();

    $sub.empty().append($(sub).filter(filter))
}).change()

演示：Fiddle