如何使两个<ul>相互依赖，就像它们被选中一样？</ul>

Question

想知道如何使两个无序列表依赖，就好像它们是选择一样。

我有这个ul和这个选择（HTML）：

<div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Ciudad</span>
        <ul class="dropdown" tabindex="1" id="ps">
            <li data-selector=".group-germ"><a href="#">Germany</a></li>
            <li data-selector=".group-sp"><a href="#">Spain</a></li>
        </ul>
    </div>
</div>

<select id="select_act" style="display:none" class="group group-germ">
    <option>Bayern Munich</option>
    <option>Borussia Dortmund</option>
</select>

<select id="select_act2" style="display:none" class="group group-sp">
    <option>Real Madrid</option>
    <option>FC Barcelona</option>
</select>

这个JS：

$(document).ready(function() {
    $('ul.dropdown').on('click', '>li>a', function(e) {
        e.preventDefault();
        $('.group').hide();
        $($(this).parent('li').attr('data-selector')).show();
    }).children('li:first').children('a:first').click();
});

问题是我想将最后两个选项也转换为列表，并且依赖于第一个列表。如何实现这一目标？

JSFiddle：http://jsfiddle.net/wY9D6/