如何使用可选择的 Jquery UI 查找选定的元素答案

【问题标题】：how to find selected elements with Jquery UI selectable如何使用可选择的 Jquery UI 查找选定的元素
【发布时间】：2009-08-20 00:11:17
【问题描述】：

我正在寻找有关 jQuery 可选事件的事件和 ui 对象的信息：“选择”和“开始”作为参数。我在文档中找不到这个，循环遍历属性也无济于事。

$('#content_td_account').selectable({
    filter: 'li:not(".non_draggable")',
    selecting: function(event, ui) { 
    }
});

具体来说，我想找出正在选择的元素并检查它们以查看它们的父元素是否相同。我认为这将在 ui 对象中的某个位置。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins

【解决方案1】：

当一个元素被选中时，它会添加ui-selected 类。

因此您可以使用$(".ui-selected") 获取所有选定的元素

这可能不完全有效，但我认为这个想法是这样的：

$('#content_td_account').selectable({
  filter: 'li:not(".non_draggable")',
  selecting: function(event, ui) { 
    var p = $(this).parent();
    $(".ui-selected").each(obj, function() {
      if(obj.parent() == p) {
        // get rad
      }
    });
  }
});

【讨论】：

有没有办法使用“ui”参数来获取当前的选择？在 selectable 中使用 stop:funtion(event,ui){} 时，ui 参数似乎总是未定义...
@nima 我认为近 2.5 年前情况并非如此。发布答案。
@Andy Gaskell 抱歉，我没有注意到日期。

【解决方案2】：

您必须使用为组选择中的每个选定项目触发的选定和未选定事件。

var selected = new Array();
$("#selectable").selectable({
    selected: function(event, ui){            
        selected.push(ui.selected.id);
    },
    unselected: function(event, ui){
        //ui.unselected.id
    }
});

【讨论】：

在 selected.push 中“选择”了什么？
selectable 是一个数组，用于存储选定的 id。但是，如果用户进行多项选择然后更改选择会怎样。您需要提出一种机制来刷新列表，以便只有最新的选择实际上是有效的 id 列表。最好的方法是调用一个函数并创建一个数组，当需要对这些选定的 id 执行操作（例如更改其背景颜色等）时填充所有选定的 id。

【解决方案3】：

通过使用:last 或:first 选择不是第一个选择，而是按li 的顺序排列第一个

这是我管理的解决方案：

HTML

<ol class="selectable">                            
     <li class="ui-widget-content" 
        id="selectable_1"
        value="1"
     > First Selectable </li>
     <li class="ui-widget-content" 
        id="selectable_2"
        value="2"
     > Second Selectable </li>
</ol>

在这段代码中，我为li 提供了一个ID 和一个值，从而使它们可用于选择事件的ui 属性

JAVASCRIPT

//A place to put the last one
var last_selected_value;
var last_selected_id;


$( ".selectable" ).selectable({
    selecting: function(event, ui) {

        //In the selection event we can know wich is the last one, by getting the id on
        //the ui.selecting.property

        last_selected_value = ui.selecting.value;
        last_selected_id = ui.selecting.id;
    },
    stop: function(event, ui) {

        //Here the event ends, so that we can remove the selected
        // class to all but the one we want

        $(event.target).children('.ui-selected').not("#" + last_selected_id)
            .removeClass('ui-selected');

        //We can also put it on a input hidden
        $( "#roles_hidden" ).val(last_selected_value);
    }
});

【讨论】：

【解决方案4】：

这将解决您的问题：

    <script type="text/javascript">
    $(function() {
        $("#selectable").selectable({
            stop: function(){
                var result = $("#select-result").empty();
                $(".ui-selected", this).each(function(){
                    var index = $("#selectable li").index(this);
                    result.append(" #" + (index + 1));
                });
            }
        });
    });
    </script>


<div class="demo">

<p id="feedback">
You've selected: <span id="select-result">none</span>.
</p>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
</ol>

查看http://jqueryui.com/demos/selectable/#serialize 了解更多信息

【讨论】：

【解决方案5】：

该事件中的 ui 参数是对元素的引用，如果是选中的事件 ui.selected 事件将是元素，如果是取消选中 unselected.ui .....等

【讨论】：