为什么 jQuery selectable 不能正常工作？

Question

我有一个 mvc 项目，我在其中实现了两个 jQuery selectable 插件，如下所示： <HTML>代码，

<div class="product-page-options">
                                <div class="pull-left">
                                    <label class="control-label" style="font-weight:bolder">Size:</label>
                                    <ol class="ui-selectable" style="width:auto" id="selectable">
                                        @{
                                            var size = Model.AvailableSizes.Split(',');
                                            foreach (var item in size)
                                            {
                                                <li class="ui-selectable">@item</li>
                                            }
                                        }
                                    </ol>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">Color:</label>
                                    <ol class="ui-selectable" style="width:auto" id="selectable1">

                                        @{
                                            var color = Model.AvailableColors.Split(',');
                                            foreach (var clr in color)
                                            {
                                                <li class="ui-selectable">@clr</li>
                                            }
                                        }
                                    </ol>
                                </div>
                            </div>

select可用jQuery插件的静态脚本。

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectable").selectable({
            selected: function (event, ui) {
                $(ui.selected).siblings().removeClass("ui-selected");
                $("#selectedsize").val($("li.ui-selected").html());
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#selectable1").selectable({
            selected: function (event, ci) {
                $(ci.selected).siblings().removeClass("ui-selected");
                $("#selectedsize").val($("li.ui-selected").html());
            }
        });
    });
</script>

第一个 selectable jQuery 插件运行良好，而第二个插件运行不正常。我的意思是我不能 select 第二个 selectable 列表中的任何项目，而且外观与第一个不一样。下图清楚地显示了问题。

我能做些什么吗？任何帮助，将不胜感激。提前致谢。

Answer 1

这里有 2 个问题。首先，您需要专门为两个可选择项设置样式（如果您的代码基于 jQuery UI 站点上的示例。其次，在选择器中选择项目, 您将需要将所选 li 元素的路径标识为相关可选元素的子元素。

$("#selectedcolor").val($("#selectable1>li.ui-selected").html());

以下 plunker 将向您展示它的工作原理：

Link To My Plunker

为什么 jQuery selectable 不能正常工作？

Why jQuery selectable is not functioning properly?

javascript

asp.net-mvc

jquery

jquery-ui-selectable