javascript - JQuery UI Selectmenu 更改点击时触发

Question

我有一个带有自定义渲染的选择菜单。后续单击会将所选值更改为第一个选项(不需要的行为)。在代码片段中，初始选择的值为“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>

我怀疑这可能与自定义渲染有关，但我看不到我正在做的任何事情可能会导致问题。

Answer 1

您似乎正在关注this example 。造成问题的原因是您的代码中缺少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/

HTML

<select name="ShipToCode" id="ShipToCode" value="2">
  <option value="-2" data-type="same">Same as Billing</option>
  <option value="-1" data-type="new">Add new address</option>
  <option value="0001" data-type="address" data-address="3121 W. 24th Street|Suite 1233|USA">ABF Distribution Warehouse</option>
  <option value="1" data-type="address" data-address="3121 W. 24th Street|Suite 1233|USA">American Business Futures Dist</option>
  <option value="2" selected="selected" data-type="address" data-address="5411 Kendrick Place|USA">Racine Warehouse</option>
  <option value="3" data-type="address" data-address="5411 Kendrick Place|USA">ABF - Racine Warehouse</option>
</select>

我稍微调整了数据属性，使其更加便携。

jQuery

$(function() {
  $.widget("custom.addressmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
      var li = $("<li>")
      var address;
      var wrapper = $("<div>", {
          class: "ui-selectmenu-item-header addressmenu",
          text: item.label
        })
        .appendTo(li);

      if (item.element.data("type") == "address") {
        address = item.element.data("address").split("|");
        $.each(address, function(k, v) {
          if (v != '') {
            var adLine = $("<span>", {
              class: "ui-selectmenu-item-content addressmenu",
              "data-address-line": k,
              text: v
            });
            wrapper.append(adLine);
          }
        });
      }

      return li.appendTo(ul);
    }
  });

  $('#ShipToCode').addressmenu({
    select: function(e, ui) {
      console.log("Selected: " + ui.item.label);
    }
  }).addressmenu("menuWidget");
});

如果选项是地址类型，我们会做一些额外的工作。我们将地址拆分并迭代每一行，为每一行创建一个 span。

现在，当您选择一个时，再选择另一个，它会保留之前的正确选择。