JQueryUIでオプションを追加する

Question

まず、オプションでイメージをレンダリングできるjquery用の選択メニュープラグインを見つけようとしました。 私はそのようなものを見つけましたが、それはずっと前に更新されておらず、もうサポートされていないのでしょうか？だから私は私のものを開発しようとしています。

私はJQuery UI Selectメニューを作成しようとしています。オプションに画像を追加したいと思います。

その後、私は自分の選択を作成し、オプションごとにイメージsrcデータを追加属性として追加します。 jqueryのUIの選択メニューのロード後、私は画像を設定したい。

私はjqueryui選択メニューのオプションを読み取り、項目の内容を更新しようとしていますけど...私はいなくても可能なサーバの負荷に

<select id="CarId2" name="CarId2"> 
 
    <option value="volvo" data-imagesrc="~/Plugins/Cars/Content/Images/volvo.png">Volvo</option> 
 
    <option value="bmw" data-imagesrc="~/Plugins/Cars/Content/Images/bmw.png">BMV</option> 
 
</select>

にレンダリング

オプション項目をロードします。

$(document).ready(function() { 
 
    $("#CarId2").selectmenu(); 
 
    var options = $("#CarId2").selectmenu("option"); 
 

 
    for (item in options) 
 
    { 
 
    console.log(item); 
 
    } 
 
});

誰かがUI選択メニューのオプションをロードし、その内容を更新する方法を私を助けることができますか？

Answer 1

次のような何か作る：あなたは（私を救っ

$(function() { 
 
    $.widget("custom.iconselectmenu", $.ui.selectmenu, { 
 
    _renderItem: function(ul, item) { 
 
     var li = $("<li>"), 
 
      wrapper = $("<div>", { text: item.label }); 
 

 
     if (item.disabled) { 
 
     li.addClass("ui-state-disabled"); 
 
     } 
 

 
     $("<span>", { 
 
     style: item.element.attr("data-style"), 
 
     "class": "ui-icon " + item.element.attr("data-class") 
 
     }).appendTo(wrapper); 
 

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

 
    $("#CarId2") 
 
    .iconselectmenu() 
 
    .iconselectmenu("menuWidget") 
 
    .addClass("ui-menu-icons avatar"); 
 
});

/* select with CSS avatar icons */ 
 
option.avatar { 
 
    background-repeat: no-repeat !important; 
 
    padding-left: 20px; 
 
} 
 
.avatar .ui-icon { 
 
    background-position: left top; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/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.js"></script> 
 

 
<select name="CarId2" id="CarId2"> 
 
    <option value="volvo" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option> 
 
    <option value="bmw" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option> 
 
    <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option> 
 
</select>

Answer 2

selectmenuウィジェットの_renderItem methodを使用できます。
この関数は、選択メニューの要素のレンダリングを担当し、必要な方法でアイテムを作成することができます。 selectmenu custom renderに見ると

.selectmenu({ 
    ... 
    _renderItem: function(ul, item) { 
     // Create the list item 
     var li = $('<li>') 
     // Create the image 
     var img = $('<img>') 
      .attr('src', $(item.element).data('imagesrc')) 

     // append the img to the list item 
     img.appendTo(li) 

     // append the list item to the menu and return the item 
     return li.appendTo(ul); 
    } 
    ... 
})