为什么 jQuery selectable 无法正常运行？答案

【问题标题】：Why jQuery selectable is not functioning properly?为什么 jQuery selectable 无法正常运行？
【发布时间】：2016-08-21 12:11:53
【问题描述】：

我有一个 mvc 项目，我在其中实现了两个 jQuery 可选插件，如下所示： <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>

可选 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>

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

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

【问题讨论】：

为什么有两个 script 和 ready 函数？你可以这样写：$("#selectable, #selectable1").selectable({...})
您正在颜色选择器中设置 $("#selectedsize")。这可能是您的错误。
@Riad 我尝试了建议的方法，但没有更好的结果，一切都还是一样。
@RichLinnell 这不是问题。

标签： javascript jquery asp.net-mvc jquery-ui-selectable

【解决方案1】：

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

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

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

Link To My Plunker

【讨论】：

谢谢试试这个！