使用 JQuery UI Selectable 在页面加载时选择列表项答案

【问题标题】：Select list items on page load with JQuery UI Selectable使用 JQuery UI Selectable 在页面加载时选择列表项
【发布时间】：2013-08-29 21:46:07
【问题描述】：

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

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>

【问题讨论】：

你是如何预选的？这样做的标准是什么？
我的计划是从他们上次访问该页面时开始传入数据，其中包含所选值的列表。因此，在选择了这些之后，这些值将使用 ajax 发布以保存它们以供下次访问。（我没有包括发布部分，因为这可以正常工作。）
在这篇文章中找到了答案：stackoverflow.com/questions/861589/…

标签： javascript jquery jquery-ui selectable jquery-ui-selectable

【解决方案1】：

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

试试这段代码，希望对你有帮助

【讨论】：

谢谢 Michal - 如何设置您的代码在加载时会预先选择哪个列表项？（对不起，我是菜鸟）