JQuery UI选择菜单改变火灾点击
JQuery UI Selectmenu change fires on click
我有一个自定义渲染的选择菜单。随后的单击将把选中的值更改为第一个选项(不想要的行为)。在代码片段中,初始选择的值是"2",即第5个选项。单击并选择另一个选项(不是第一个),到目前为止一切顺利。
再次单击控件,它将更改为触发更改事件的第一个选项。它将为所有后续单击执行此操作。
$.widget(".addressmenu", $.ui.selectmenu, {
_renderItem: function(ul, item) {
var li = $("<li>");
$("<span>", {
text: item.label
})
.addClass("ui-selectmenu-item-header addressmenu")
.appendTo(li);
if (item.element.attr("data-address1") != '') {
$("<span>", {
text: item.element.attr("data-address1")
})
.addClass("ui-selectmenu-item-content addressmenu")
.appendTo(li);
}
if (item.element.attr("data-address2") != '') {
$("<span>", {
text: item.element.attr("data-address2")
})
.addClass("ui-selectmenu-item-content addressmenu")
.appendTo(li);
}
if (item.element.attr("data-address3") != '') {
$("<span>", {
text: item.element.attr("data-address3")
})
.addClass("ui-selectmenu-item-content addressmenu")
.appendTo(li);
}
if (item.element.attr("data-address4") != '') {
$("<span>", {
text: item.element.attr("data-address4")
})
.addClass("ui-selectmenu-item-content addressmenu")
.appendTo(li);
}
return li.appendTo(ul);
}
});
$('#ShipToCode').addressmenu({
change: function() {
alert("CHANGED!!!");
}
}).addressmenu("menuWidget");
#checkout .ui-selectmenu-button {
text-align: left;
}
.ui-selectmenu-item-header,
.ui-selectmenu-item-content {
display: block;
}
.ui-menu .ui-menu-item-wrapper.addressmenu {
padding: 2px 0 1px .5em;
}
.ui-state-active.addressmenu,
.ui-widget-content .ui-state-active.addressmenu {
border: none;
color: #00f;
background: #f0f0f0;
}
.ui-selectmenu-item-header.addressmenu.ui-menu-item-wrapper.ui-state-active {
font-weight: bold;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<select name="ShipToCode" id="ShipToCode" value="2">
<option value="-2">Same as Billing</option>
<option value="-1">Add new address</option>
<option value="0001" data-address1="3121 W. 24th Street" data-address2="Suite 1233" data-address4=" USA">ABF Distribution Warehouse</option>
<option value="1" data-address1="3121 W. 24th Street" data-address2="Suite 1233" data-address4=" USA">American Business Futures Dist</option>
<option value="2" selected="selected" data-address1="5411 Kendrick Place" data-address4=" USA">Racine Warehouse</option>
<option value="3" data-address1="5411 Kendrick Place" data-address4=" USA">ABF - Racine Warehouse</option>
</select>
我怀疑这可能与自定义渲染有关,但我看不出我正在做的任何可能导致问题的事情。
您似乎遵循了这个示例。是你的代码中缺少wrapper
导致了这个问题。
呈现时,它将包装器应用于li
元素中的每个span
。所以它们会呈现为:
<li class="ui-menu-item">
<span class="ui-selectmenu-item-header addressmenu ui-menu-item-wrapper ui-state-active" id="ui-id-3" tabindex="-1" role="option">ABF Distribution Warehouse</span>
<span class="ui-selectmenu-item-content addressmenu ui-menu-item-wrapper ui-state-active" id="ui-id-4" tabindex="-1" role="option">3121 W. 24th Street</span>
<span class="ui-selectmenu-item-content addressmenu ui-menu-item-wrapper ui-state-active" id="ui-id-5" tabindex="-1" role="option">Suite 1233</span>
<span class="ui-selectmenu-item-content addressmenu ui-menu-item-wrapper ui-state-active" id="ui-id-6" tabindex="-1" role="option">USA</span>
</li>
您可以看到它如何将ui-menu-item-wrapper
类附加到每个。
这是我的建议,工作示例:https://jsfiddle.net/Twisty/gxx9agyj/4/