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

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

第二个元素填充有一个选项列表，这些选项的父db-id为值，其自己的db-id为html id-attribute。这些是儿童类别。

问题：
我想隐藏所有的子猫，并且在任何父类别的每次选择事件中，相对的子都将变得可见，它们的值与其父的值相同。

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

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代码方面的任何帮助，谢谢

最佳答案

尝试

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