为什么jQuery selectable不能正常工作？
为什么jQuery selectable不能正常工作？
提问于 2016-08-21 20: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列表中选择任何项目，而且外观也与第一个不同。下图清楚地显示了问题所在。
我能做些什么呢？任何帮助都将不胜感激。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-22 03:46:35
这里有两个问题在起作用。首先，您需要专门为这两个可选项设置样式(如果您的代码基于jQuery UI站点上的示例。其次，在项的选择器中进行选择时，需要将所选li元素的路径标识为相关可选元素的子元素。
$("#selectedcolor").val($("#selectable1>li.ui-selected").html());
下面的柱塞将向您展示它的工作原理：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39064041
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号