javascript - jQuery 每个函数 $(this) 混淆

Question

说明:我有两个元素，里面有很多选项。第一个包含一系列选项，它们的值是 db-id。他们是 parent 。

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

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

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

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

尝试

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