jquery ui选中多个元素

浏览数：55 / 时间：2015年06月09日

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