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>

我懷疑這可能是與自定義渲染，但我看不到任何東西，我這樣做可能會導致問題。

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"); 
}); 

如果option是一個地址類型，我們做一些額外的工作。我們將地址分開並遍歷每一行，爲每一行創建一個span。

現在，當你選擇一個，選擇另一個，它保留了以前的正確選擇。