如何在Jquery multiselect中选择带有其父母和孩子的组

凯萨万

实际上,我有一个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 multiselect选项一样移至右列

我在下面附加了一个示例屏幕截图。

在此处输入图片说明

Zword

检查这个小提琴

在上面的小提琴中,仅显示单击的文本li及其后继文本li's

jQuery的

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

更新了代码以回应评论

HTMLclass="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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在jQuery Datepicker中选择日期?

来自分类Dev

ReactJS-孩子如何找到其父母?

来自分类Dev

如何在select2 JavaScript multiselect中选择所有选项

来自分类Dev

如何在jQuery下拉列表中选择值

来自分类Dev

如何在jQuery中选择第n个HTML行

来自分类Dev

jQuery的如何选择父母而不是孩子

来自分类Dev

如何在jQuery中的div中选择类元素

来自分类Dev

如何在jQuery中选择多个下拉菜单?

来自分类Dev

如何在jQuery中选择元素的祖父母

来自分类Dev

如何从父母中选择一组孩子?

来自分类Dev

如何在R中选择带有星号的变量

来自分类Dev

如何从SQL中选择带有或条件和计数的内容?

来自分类Dev

如何在Cheerio / jQuery中从li元素中选择值?

来自分类Dev

如何在jQuery中选择具有ID链的元素?

来自分类Dev

如何在Jquery中选择此ID?

来自分类Dev

如何在jQuery中选择(获取)所有<select>元素

来自分类Dev

如何在jQuery选择的Multiselect中发布选定的元素

来自分类Dev

ReactJS-孩子如何找到其父母?

来自分类Dev

jQuery-如何根据孩子的属性选择父母?

来自分类Dev

jQuery的如何选择父母而不是孩子

来自分类Dev

如何获得一个带有其父节点的json对象?

来自分类Dev

如何在jQuery中选择文本之前和之后选择

来自分类Dev

如何从带有其父级的xml文件中提取特定节点?

来自分类Dev

如何在jQuery中选择具有多个类的元素?

来自分类Dev

如何在jquery中选择没有值的选项?

来自分类Dev

如何在原则中选择带有int标志的行

来自分类Dev

如何在jQuery中选择没有特定元素的元素

来自分类Dev

如何选择父母的孩子的号码?

来自分类Dev

如何在R中的cbind中选择带有空格和` ' `的名称?

Related 相关文章

热门标签

归档