Question

好吧这可能有点长，所以请坚持下去！

我在HTML中有一个时间表网格，显示句点/天，每个单元格都设置为“可选”类。

然后我使用jQuery UI Selectable让我只选择设置为可选择的单元格（以停止选择表头）。当您完成选择后，javascript会将隐藏字段添加到表单中，随时可以通过POST获取。

这是错误的来源。

如果您拖动多个单元格并单击BOOK，它会正确传递它们（选择3个单元格并通过隐藏输入传递）。如果你拖动多个单元格，然后单击选择一个不同的单元格并单击BOOK，它似乎会选择一些先前的多个选择。

现在更奇怪了，它不会在Firefox或我的IE9副本中执行此操作，但在其他IE9副本上它确实会导致此错误。由于教育环境我们无法真正使用FF或其他任何东西，我需要它在IE8 / 9/10上工作。

以下是我的JavaScript位....

不可否认，它们看起来很混乱，我以前从未使用过JavaScript，但所选功能的运行方式与我想要的一致。这是未选择的功能，似乎会导致问题。

$( "#selectable" ).selectable({ 
    filter: ".selectable", 
    selected: function() { 
        var count = 0;
        $( ".ui-selected", this ).each(function() { 
            var data = $(this).data(); 
            $(data).each(function(key, value){ 
                var room_id = document.createElement("input"); 
                room_id.setAttribute("type", "hidden"); 
                room_id.setAttribute("name", "booking["+count+"][room]"); 
                room_id.setAttribute("value", data.room);
                room_id.setAttribute("class", "js-added");  
                document.getElementById("add").appendChild(room_id);
                var date_id = document.createElement("input"); 
                date_id.setAttribute("type", "hidden"); 
                date_id.setAttribute("name", "booking["+count+"][date]"); 
                date_id.setAttribute("value", data.date); 
                date_id.setAttribute("class", "js-added");
                document.getElementById("add").appendChild(date_id);
                var period_id = document.createElement("input"); 
                period_id.setAttribute("type", "hidden"); 
                period_id.setAttribute("name", "booking["+count+"][period]"); 
                period_id.setAttribute("value", data.period);
                period_id.setAttribute("class", "js-added"); 
                document.getElementById("add").appendChild(period_id); 
                var day_id = document.createElement("input"); 
                day_id.setAttribute("type", "hidden"); 
                day_id.setAttribute("name", "booking["+count+"][day]"); 
                day_id.setAttribute("value", data.day);
                day_id.setAttribute("class", "js-added"); 
                document.getElementById("add").appendChild(day_id); 
                var bookable_id = document.createElement("input"); 
                bookable_id.setAttribute("type", "hidden"); 
                bookable_id.setAttribute("name", "booking["+count+"][bookable]"); 
                bookable_id.setAttribute("value", data.bookable);
                bookable_id.setAttribute("class", "js-added"); 
                document.getElementById("add").appendChild(bookable_id);
                var bookable_id_delete = document.createElement("input"); 
                bookable_id_delete.setAttribute("type", "hidden"); 
                bookable_id_delete.setAttribute("name", "booking["+count+"][bookable]"); 
                bookable_id_delete.setAttribute("value", data.bookable);
                bookable_id_delete.setAttribute("class", "js-added"); 
                document.getElementById("delete").appendChild(bookable_id_delete);
                var booking_id_delete = document.createElement("input"); 
                booking_id_delete.setAttribute("type", "hidden"); 
                booking_id_delete.setAttribute("name", "booking["+count+"][booking_id]"); 
                booking_id_delete.setAttribute("value", data.bookingid);
                booking_id_delete.setAttribute("class", "js-added"); 
                document.getElementById("delete").appendChild(booking_id_delete);
                var bookable_id_edit = document.createElement("input"); 
                bookable_id_edit.setAttribute("type", "hidden"); 
                bookable_id_edit.setAttribute("name", "booking["+count+"][bookable]"); 
                bookable_id_edit.setAttribute("value", data.bookable);
                bookable_id_edit.setAttribute("class", "js-added"); 
                document.getElementById("edit").appendChild(bookable_id_edit);
                var booking_id_edit = document.createElement("input"); 
                booking_id_edit.setAttribute("type", "hidden"); 
                booking_id_edit.setAttribute("name", "booking["+count+"][booking_id]"); 
                booking_id_edit.setAttribute("value", data.bookingid);
                booking_id_edit.setAttribute("class", "js-added"); 
                document.getElementById("edit").appendChild(booking_id_edit);
                count = count + 1;
            }); 
        }); 
    }, 
    unselected: (function(){
        $('div').removeClass('ui-selected');
        $(".js-added").remove();
    })
});

如果需要页面中的任何其他代码，请告知我们。

只是为了解决它，如果我拖过Mon-P1 / Mon-P2 / Mon-P3 / Mon-P4并点击BOOK，它会显示正确。如果我拖过相同的4然后单击选择Tue-P1（应该取消选择所有其余的并选择它），它会给我：

Tue-P1 / Mon-P2 / Mon-P3 / Mon-P4

好像它只取消了第一个元素，而不是其余元素。是否需要类似$(".ui-selected").each()函数的循环遍历所有条目？

Answer 1

对此的答案，奇怪的是IE8 / 9在Intranet站点上强制执行兼容性视图。关闭这个多选工作正常。我最后不得不添加内容“IE = 9”的元标题以使其工作，边缘和IE = 8没有做任何事情。
不确定这是否会影响其他jquery的东西，但兼容性视图是一个很好的选择，看看你是否有问题

jQuery UI可选择未选中

1 个答案:

jQuery UI可选择未​​选中

1 个答案:

jQuery UI可选择未选中