カスタムjQuery Mobile Select Menuのアイコン

Question

私はjQuery Mobileのカスタム選択メニューを使用していますが、それぞれのカスタムポップアップメニューにアイコンを入れて、それぞれoptionに付したいと思います。

<select name='mySelect' id='mySelect' data-icon='gear'> 
    <option value='0' data-icon='star'>Option 0</option> 
    <option value='1' data-icon='star'>Option 1</option> 
    <option value='2' data-icon='star' selected="selected">Option 2</option> 
</select> 

FWIW、私はすでに私のカスタムアイコンが選択ボタン自体に動作することを確認した：私はそうのように、各optionにdata-icon属性を適用しています。カスタムメニューにアイコンが表示されるのを間違っていますか？

Answer 1

これはデフォルトでサポートされていますが、ここでそれを可能にするために、コードの迅速な作品ですされていません。ここで

//wait for the correct page to initialize 
$(document).delegate('#home', 'pageinit', function() { 

    //loop through each of the SELECT elements in this page 
    $.each($(this).find('select'), function() { 

     //get the ID of this select because it's menu's ID is based off of it 
     var currentID = this.id; 

     //iterate through each of the OPTION elements for this SELECT element 
     $.each($(this).find('option'), function (index, element) { 

      //if the OPTION element has the `data-icon` attribute 
      if ($(element).attr('data-icon') != undefined) { 

       //update the menu for this SELECT by adding an icon SPAN element 
       //to each of the OPTION elements that has a `data-icon` attribute 
       $('#' + currentID + '-menu').children().eq(index).find('.ui-btn-inner').append('<span class="ui-icon ui-icon-' + $(element).attr('data-icon') + ' ui-icon-shadow" />'); 
      } 
     }); 
    }); 
});​​ 

はデモです：http://jsfiddle.net/NHQGD/