JQuery UI Selectmenu 클릭시 변경 실행

Question

나는 사용자 정의 렌더링이있는 선택 메뉴가 있습니다. 이후의 클릭은 선택한 값을 첫 번째 옵션으로 변경합니다 (원하지 않는 동작). 코드 스 니펫에서 초기 선택 값은 "5"이며 이는 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에 래퍼를 적용했습니다. 이 각각에 ui-menu-item-wrapper 클래스를 추가 한 방식을 볼 수

<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> 

: 그래서 그들은 같은 렌더링 것이다. 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> 

I 데이터가 그들을 더 휴대용 수 있도록 약간의 속성 조정 : 여기

내가, 작업 예를 권합니다 것입니다.

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을 만듭니다.

이제 하나를 선택하고 다른 것을 선택하면 적절한 이전 선택이 유지됩니다.