选择菜单显示多次

Question

我有一个 select HTML 控件，如下所示：

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

</select>

我创建了一个名为 jqmSelectMenuRefresh 的自定义敲除绑定，因为每当我从选择列表中选择一个选项时，我都无法在选择列表中看到它。 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);