Question

我想用一个值列表替换一个滑块，并选择一个选项来选择范围。我按照jquery可选文章，提供了一个很好的多选选项

http://jqueryui.com/demos/selectable/#display-grid

由于我只想要范围选择，因此我使用以下代码禁用了Ctrl键单击。

  $("#selectable").bind("mousedown", function (e) {
            e.metaKey = false;
            }).selectable();

http://forum.jquery.com/topic/disabling-ctrl-click-on-jquery-ui-selectable

这会禁用ctrl-select，但我仍然可以拖动鼠标并选择不在范围内的值。

我的列表是4x4矩阵。问题是我可以拖动鼠标并在同一列中选择值，这些列不会突出显示相同范围内相邻列中的值。除了一行之外还有什么出路吗？

Answer 1

如果您有多行并希望每个单独的行都成为拖动选择的主题，则只需在每行上创建.selectable()。我为此解决方案制作了一个演示：http://jsfiddle.net/Nm69t/（或单独的网页浏览：http://jsfiddle.net/Nm69t/show）

你可以看到，我创建了三个列表（作为三个单独的行）并通过执行$('.selectable').selectable();

使每个行可选择

希望它有所帮助。

Answer 2

编写了一个从namevalue集合中创建可选择的函数。我是Jquery和Javascript的新手，因此有一些微调空间。

function NameValue(name, value) {
        this.name = name;
        this.value = value;
    }

    function createRangeSelectable(elementName, nameValueCollection, functionReference) {
           var newElementId = "selectable" + elementName;
        var orderedListHTML = "<ol id='" + newElementId + "' class='selectable'>";
        var itemHTML = "";

        for (x in nameValueCollection) {
            var item = nameValueCollection[x];
            itemHTML = itemHTML + "<li class='ui-state-default'>" + item.name + "<input type='hidden' value='" + item.value + "'/></li>";
        }

        orderedListHTML = orderedListHTML + itemHTML + "</ol>"

        $("#" + elementName).html(orderedListHTML);


        $("#" + newElementId).bind("mousedown", function (e) {
            e.metaKey = false;
        }).selectable({

            stop: function () {
                var first = -1;
                var last = -1;

                $(".ui-selected", this).each(function () {

                    var index = $("li", this.parentElement).index(this);
                    if (first == -1)
                        first = index
                    last = index
                });

                var firstListItemValue;
                var lastListItemValue;

                $("li", this).each(function () {


                    var index = $("li", this.parentElement).index(this);
                    if (index == first) {
                        firstListItemValue = $(this).children('input').val();
                    }
                    if (index == last)
                        lastListItemValue = $(this).children('input').val();

                    if (index > first && index < last)
                        if (!$(this).hasClass("ui-selected"))
                            $(this).addClass("ui-selected");
                });

                functionReference(firstListItemValue, lastListItemValue);
            }

        });

//Usage

createRangeSelectable("YourDivId", NameValueArray, function(startValue, endValue){

         });

Answer 3

我为此解决方案制作了一个演示：http://jsfiddle.net/snyuan/TGekT/和http://jsfiddle.net/snyuan/Yrgnv/。只是一个参考。

Jquery可选择范围选择（滑块行为）

3 个答案: