Jquery mobile 如何将图像添加到jQuery Mobile Select菜单项

我想创建一个jquerymobileselect菜单，其中包含每个选项的图像。中介绍了基本版本。我知道有一些jQuery插件实现了这一点，但我只想使用jquerymobile

是否有人已经意识到这一点或有想法如何实现这一点？

使用检查员（如firebug）了解元素是如何创建的，并在元素准备就绪后将图像添加到其中的跨度中。这是在不修改JQM本身的情况下使其与jquerymobile一起工作的唯一方法

---

另外-在jQuery Mobile alpha4的最新版本中，默认情况下，select使用默认浏览器组件呈现。

我有一个移动web，可以使用这个案例（但它仍然不可用）。 试试这个：

1。为图像创建CSS样式，并给出以下子句：

CSS:

HTML:

---

这对我很有用。

谢谢你的建议，但我刚刚将其从选择菜单更改为对话框。这要容易得多。我已经试过了，但不适合我。你能举个例子吗？有趣的方法。这不起作用的一个原因是dom ready缺少它的closing}）；（修复了它）另一个原因（在IE中）是IE不支持console.log（），除非开发者工具（F12）是打开的。删除JS中的这一行会有所帮助。代码中也有一个bug（已修复）。我还更喜欢使用.addClass（selection）；而不是鼠标悬停侦听器中的.attr（'class'，'ui btn text'+selection）。我无法复制您的特定背景图像，但这里有一个供您使用的小提琴（或稍后出现的人，如我所做的），这是使用data native menu=“false”选项的任何人的另一个示例。

.eur {background: url(../images/flags/EuropeanUnion.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;}
.usd {background: url(../images/flags/us.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;}
.gbp {background: url(../images/flags/gb.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;}

<option value="eur" class="eur" selected="selected">Euro</option>
<option value="usd" class="usd">US Dollar</option>
<option value="gbp" class="gbp">GB Pound</option>

<select data-mini="true" class="select-with-images">
  <option value="eur" class="eur" selected="selected">Euro</option>
  <option value="usd" class="usd">US Dollar</option>
  <option value="gbp" class="gbp">GB Pound</option>
</select>

<div class="ui-select">
  <div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Euro</span>
      <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
    </span>
    <select class="select-with-images" data-mini="true">
      <option selected="selected" class="eur" value="eur">Euro</option>
      <option class="usd" value="usd">US Dollar</option>
      <option class="gbp" value="gbp">GB Pound</option>
    </select>
  </div>
</div>

$(document).ready(function() {
  //select-with-images
  $('.select-with-images').on('change', function() {
    var selection = $(this).val();
    $(this).parents('.ui-select').find('.ui-btn-text').attr('class', 'ui-btn-text '+selection);
  });
  $(document).on('mouseover', function() {
    $('.select-with-images').each(function() {
      var selection = $(this).find(':selected').val();
      $(this).parents('.ui-select').find('.ui-btn-text').attr('class', 'ui-btn-text '+selection);
    });
  });
});