我正在制作一个错误报告处理系统，我正在尝试使用jQuery UI .selectable来获取用户点击的所有报告，但报告会根据它们来自的系统分组到列表中。可以同时选择多个列表。
在链接的演示中，我目前只是打印出ID，这对于单个列表可以正常工作。但是，当我从两个或更多不同的列表中选择项目时，已列出的ID将消失。它们似乎仍然被选中。可选择的眼睛，但它们不再被打印。 每次我点击不同的列表时，之前的ID都会消失，新的ID会出现。
有谁知道我能做些什么来打印所有东西？
另外，有没有办法将.ui选择的类应用于元素，给定一个应该被选择的字符串/数组值？基本上，与此脚本的功能相反。 （如果那有道理......？）
JSFiddle：http://jsfiddle.net/Kantana/Z3SBU/1/
的Javascript
$(function() {
$(".selectable").bind("mousedown", function(event) {
event.metaKey = true;
}).selectable({
stop: function() {
var result = $("#selectedItems").empty();
$(".ui-selected", this).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
});
})
CSS
此示例主要使用Twitter Bootstrap CSS。
HTML
<span id="selectedItems">None selected</span>
<div class="accordion" id="accordion2">
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#1'>System 1 - All responding</a>
</div>
<div id='1' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_60'>
Error #60 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#2'>System 2 - All responding</a>
</div>
<div id='2' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_62'>
Error #62 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#3'>System 3 - All responding</a>
</div>
<div id='3' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_56'>
Error #56 - Responding
<p class='tinytext'>Check type: Free Memory</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_57'>
Error #57 - Responding
<p class='tinytext'>Check type: SSH</p>
<p class='tinytext'>Error message: CRITICAL - Socket timeout after 10 seconds</p>
<li class='report file ui-widget-content' id='report_55'>
Error #55 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: PING CRITICAL - Packet loss = 100%</p>
<li class='report file ui-widget-content' id='report_54'>
Error #54 - Responding
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_58'>
Error #58 - Responding
<p class='tinytext'>Check type: Load Average</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#4'>System 4 - 1 error</a>
</div>
<div id='4' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_59'>
Error #59 - Warning
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unknown</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#5'>System 5 - 1 error</a>
</div>
<div id='5' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_61'>
Error #61 - Warning
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: DISK WARNING - free space: / 11230 MB (15% inode=78%): /dev 989 MB (99% inode=99%): /run 398 MB (99% inode=99%): /run/lock 5 MB (100% inode=99%): /run/shm 997 MB (100% inode=99%):</p>
</li>
</ol>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
更改stop函数的范围选择整个手风琴中的ui-selected元素。指定$(".ui-selected", this)仅查看所选的单个项目，因为它包含对可选项的引用。
stop: function() {
var result = $("#selectedItems").empty();
//changed from this to #accordion
$(".ui-selected", $("#accordion2")).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}