javascript - 选择多次显示的菜单

Question

我有一个选择 HTML 控件，如下所示:

 <select name="width-dimension-inches" id="width-dimension-inches"  data-bind="value: widthWhole,jqmSelectMenuRefresh :true, options: widthDimension.dimension.getDimensionsWhole()">

</select>

我创建了一个名为 jqmSelectMenuRefresh 的自定义 knockout 绑定(bind)，因为每当我从选择列表中选择一个选项时，我都无法在选择列表中看到它。 jqmSelectMenuRefresh 的实现如下所示:

define(["jquery", "knockout", "jqueryMobile"], function ($, ko) {
    ko.bindingHandlers.jqmSelectMenuRefresh = {

        init: function(element) {

            $(element).selectmenu().selectmenu('refresh', true);

        },

当我运行上面的代码时，我最终得到两个选择菜单，如下所示:

我该如何解决这个问题？

更新 1:

如果我将代码更新为以下内容:

  init: function(element) {

            $(element).selectmenu('refresh',true);

然后我收到以下错误消息:

Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' 

Answer 1

每次调用 selectmenu() 函数时，都会创建新实例。

$(element).selectmenu().selectmenu('refresh', true);

上面的代码行将创建两个实例，最终得到两个可见元素。

我的建议是初始化插件，将实例存储在变量中，然后调用该对象上的函数:

var $instance = $(element).selectmenu();
$instance.selectmenu('refresh', true);