使用JQuery UI Selectable在页面加载上选择列表项

Select list items on page load with JQuery UI Selectable

本文关键字：加载 选择 列表 JQuery UI Selectable 使用      更新时间：2023-09-26

我正在尝试设置一个可选择的项目列表，并希望在页面加载时已经选择了一些列表项目。用户需要能够选择多个项目（使该部分工作），但需要能够在列表中取消选择预选项目。。。就好像用户最初点击它们来选择它们一样。感谢您的任何建议-

Javascript：

$(function() {
    $("#selectable").bind("mousedown", function(e) {       //acts as if the control key is pressed so that more than one item can be selected
    e.metaKey = true;
    }).selectable();
});

样式：

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;}
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

HTML

<ol id="selectable" >
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>     
    <li class="ui-widget-content" value="SU125AM">12:30</li>
    <li class="ui-widget-content" value="SU1AM">1:00</li>
    <li class="ui-widget-content" value="SU15AM">1:30</li>
    <li class="ui-widget-content" value="SU2AM">2:00</li>
    <li class="ui-widget-content" value="SU25AM">2:30</li>
    <li class="ui-widget-content" value="SU3AM">3:00</li>
</ol>

<html lang="en">
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
jQuery(function() {
    $(".ui-widget-content").bind("mousedown", function(e) {
    var element = $(e.target);
    if (element.hasClass('selected')) {
        element.removeClass( "selected" );
    }
    else{
    element.addClass( "selected" );
    }
    });
});

</script>
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 10%; overflow:auto;}
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
.selected { background: #0014FF; }
</style>
</head>
<body>
<ol id="selectable" >
    <li class="ui-widget-content" value="SU12AM">12:00AM</li>     
    <li class="ui-widget-content" value="SU125AM">12:30</li>
    <li class="ui-widget-content" value="SU1AM">1:00</li>
    <li class="ui-widget-content" value="SU15AM">1:30</li>
    <li class="ui-widget-content" value="SU2AM">2:00</li>
    <li class="ui-widget-content" value="SU25AM">2:30</li>
    <li class="ui-widget-content" value="SU3AM">3:00</li>
</ol>

</body>
</html>

试试这个代码，我希望它能帮助

相关文章：