jquery ui选中多个元素

来源：互联网发布：oracle数据库未打开编辑：程序博客网时间：2024/06/03 22:57
<style type="text/css">li {    background: #eef;    margin-bottom:5px;    list-style-type: none;}.color1{background: #ffe;        margin-bottom:5px;    list-style-type: none;    }</style><script type="text/javascript">$(document).ready(function(){    $("#selectable").selectable({                     //进行拖动多选        stop:function(){                              //当拖动选择结束时，触发stop事件            var result=$("#select-result").empty();   //清空结果列表            $(".ui-selected",this).each(function(){     //当选中时，jqueryui会自动加样式ui-selected,循环选中的结果                var index=$("#selectable li").index(this); //获取选中的索引                result.append("#"+(index+1)+""+$(this).html()); //显示选中的索引和值            })        }    });    $("li").toggle(        function(){            $(this).addClass("color1");        },        function(){            $(this).removeClass("color1");        }    );});</script></head><body>    <p id="feedback">        <span>已经选择的结果:</span><span id="select-result">none</span>    </p>    <ol id="selectable">        <li class="ui-widget-content">张小三</li>        <li class="ui-widget-content">李四</li>        <li class="ui-widget-content">王强</li>        <li class="ui-widget-content">韩琦</li>        <li class="ui-widget-content">廖婉如</li>        <li class="ui-widget-content">苏志宇</li>    </ol></body>
0 0