如何选择一个有父母和一组的小组Jquery multiselect中的孩子

Question

实际上，我有一个multiselect option可供选择，但现在我可以选择父母＆amp;有孩子，但现在我想选择一个Group With its parent & Child， 所以，如果我选择一个组，所有父母＆amp;小组中的孩子应该和小组一起移动，所以请帮帮我....

这是我的示例代码

<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>

如果我选择一个组（即）India然后all the childs under this group should be moved到右列，就像jquery ui multiselect选项

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

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 （稍微更改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;
}