如何在 Jquery 多选中选择一个包含其父母和孩子的组

Question

实际上，我有一个multiselect option 可供选择，但现在我可以单独选择一个父母和那里的孩子，但现在我想选择一个Group With its parent & Child， 因此，如果我选择一个组，则该组中的所有父母和孩子都应该与该组一起移动，所以请帮助我....

这是我的示例代码

<script src="./jquery.min.js"></script>     
<script type="text/javascript">
    var me = jQuery || $.noConflict();
    me(document).ready(function() {
        if((me('ul li ul li ul li').children().length) == 0 ) {
            me('ul li ul li ul li').addClass("list");
        }
        me('ul li ul li').click(function() {
            me('ul li ul li').removeClass("list_state");
            if((me(this).children().length) > 0 )   {
                me(this).addClass("list_state");
                me('.list_state').click(function() {
                    $val = me(this).prop("tagName").toLowerCase();
                    $txt = me(this).text();
                    me('#result').html($txt).wrapInner('<'+$val+'>');
                });
            }
        });
        me('li.list').click(function() {
            $val = me(this).prop("tagName").toLowerCase();
            $txt = me(this).text();
            me('#result').html($txt).wrapInner('<'+$val+'>');
        });         
    });
</script>
<ul>
    <li id="level-0">India
        <ul>
            <li id="level-0-3">Tamil nadu
                <ul>
                    <li>Chennai</li>
                    <li>Trichy</li>
                    <li>Madurai</li>
                    <li>Kanya kuamri</li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="level-1">United Kingdom
        <ul>
            <li id="london">London
                <ul>
                    <li>London1</li>
                    <li>London2</li>
                    <li>London3</li>
                    <li>London4</li>
                </ul>
            </li>
        </ul>   
    </li>
</ul>
<div id="result"></div>

如果我选择一个组（即）印度，那么 all the childs under this group should be moved 到右列，就像 jquery ui 多选选项一样

我在下面附上了一个示例截图..

Answer 1

Check this fiddle

在上面的小提琴中，只会显示点击的li 及其后继li's 中的文本：

jQuery

$('ul').on('click','li',function(){
    $('#result').html($(this).text());
    return false;
});

---

Updated code in response to comment

HTML（在 Country 和 State 中添加了 class="par" 的细微变化）

<ul>
    <li id="level-0" class="par">India
        <ul>
            <li id="level-0-3" class="par">Tamil nadu
                <ul>
                    <li>Chennai</li>
                    <li>Trichy</li>
                    <li>Madurai</li>
                    <li>Kanya kuamri</li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="level-1" class="par">United Kingdom
        <ul>
            <li id="london" class="par">London
                <ul>
                    <li>London1</li>
                    <li>London2</li>
                    <li>London3</li>
                    <li>London4</li>
                </ul>
            </li>
        </ul>   
    </li>
</ul>
<div id="result"></div>

更新的 JQuery

$('ul').on('click','li',function(){
    $('#result').html($(this).html());
    if($(this).attr('class')=="par")
    {
    return false;
    }
});

为外观添加了少量 CSS。（根据需要更改 CSS）

html,body{
    margin:0px;
    padding:0px;
    width:100%;
}
ul{
    width:50%;
    display:table-cell;
    border:1px solid black;
}
div{
    width:50%;
    display:table-cell;
    border:1px solid black;
}