当前位置：文江博客话题详情

Jquery UI SELECTABLE，如何仅选择一项？

发布于 2024-11-04 11:43:41 字数 92 浏览 3 评论 0原文

有没有什么方法可以定义，使用 jquery.selectable 小部件只能选择一个项目？

或者我必须实现一个捕获事件并由我自己操纵会发生什么的解决方法？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

停顿的约定 2024-11-11 11:43:41

我扩展了 Nirmal 的答案以限制鼠标选择情况。另外，我觉得使用 selected 选项比使用完全独立的事件处理程序更干净。

$("#selectable").selectable({
    selected: function(event, ui) { 
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");           
    }                   
});

还剩下一个小问题。使用鼠标选择多个项目时，将始终选择最后一个项目。这是因为传递到 selected 选项的函数是为每个选定的项目运行的，我假设它是按项目顺序排列的。理想情况下，将选择鼠标光标所在的项目。我没有修复这个问题，因为我主要只是想在使用鼠标时有一个多重选择约束。

I expanded on Nirmal's answer to limit the mouse select case. Also, I feel that it is cleaner to use the selected option rather than a completely separate event handler.

$("#selectable").selectable({
    selected: function(event, ui) { 
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");           
    }                   
});

There is one minor problem remaining. When selecting multiple items with the mouse the last item will always be selected. This is because the function passed into the selected option is run for each selected item, which I assume goes in item order. Ideally the item that your mouse cursor lands at would be selected. I didn't fix this because I mainly just wanted a multiple selection constraint when using the mouse.

回复收藏 0 原文

最终幸福 2024-11-11 11:43:41

$("#myList li").click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
});

$("#myList li").click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
});

回复收藏 0 原文

浅黛梨妆こ 2024-11-11 11:43:41

我稍微改进了 mattblang 的答案。兄弟姐妹也可以有后代，所以更普遍的答案是：

$("#selectable").selectable({
    selected: function(event, ui) {
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected").each(
            function(key,value){
                $(value).find('*').removeClass("ui-selected");
            }
        );
    }
});

I improve mattblang's answer a little. Siblings can have also descendants, so more general answer is:

$("#selectable").selectable({
    selected: function(event, ui) {
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected").each(
            function(key,value){
                $(value).find('*').removeClass("ui-selected");
            }
        );
    }
});

回复收藏 0 原文

~没有更多了~