javascript - JQuery UI Selectmenu の変更がクリック時に発生する

Question

カスタム レンダリングの selectmenu があります。その後クリックすると、選択した値が最初のオプションに変更されます (望ましくない動作)。コード スニペットでは、最初に選択された値は「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>

これはカスタム レンダリングに関係している可能性があると思われますが、問題の原因となる可能性があることは何もわかりません。