How to select a group with its parents & child in Jquery multiselect

Question

Actually,I have a multiselect option to select,But now i can able to select a parent & there child alone,But now i want to select a Group With its parent & Child, So if i select a group all the parent & child in the group should have be moved with the group,So help me....

Here is my example code

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

If i select a group (i.e) India then all the childs under this group should be moved to right column as like jquery ui multiselect option

I have attached an example screenshot below..

Answer 1

Check this fiddle

In the above fiddle only the text within clicked li and its successor li's will be displayed:

jQuery

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

---

Updated code in response to comment

HTML(slight change added class="par" to Country and State)

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

Updated JQuery

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

Added little CSS for look.(Do CSS change as needed)

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