Question

我有一个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列表中选择任何项目，并且外观与第一个不同。下图清楚地显示了问题。

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

Answer 1

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

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

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

Link To My Plunker

为什么jQuery selectable运行不正常？

1 个答案: