Geek asks and answers

How to select a group with your parents and child in jquery multiselect

In fact, I have multiselect optionto choose, but now I can choose a parent and only one child. But now I want to choose Group With its parent & Child, therefore, if I select a group, all the parent and child elements in the group should be moved along with the group, so help me ....

Here is my sample 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 (e.g. India), then all the childs under this group should be movedto the right column, as a variant of jquery ui multiselect

I have attached an example screenshot below ..

enter image description here

+3
source share
1 answer

Check out this script

In the above script, only the text in clicked liand its successor will be displayed li's:

JQuery

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

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

More articles:


All Articles