Jquery 通过显示每个选定值选项的唯一图像

这段代码非常有用，它有一个下拉列表，针对选定的选项，并在选定时在另一个div中显示每个选项。谢谢你的帮助@Arun P Johny。但是，我需要为显示在不同div中的每个选定选项传递一个唯一的图片。如何将其添加到jquery中？因为css只是显示每个选定选项的按钮。下面是一个屏幕截图，以便更好地理解。

Jquery

$(function() {
$("#events").hide();
$("#myselect select").change(function() {
  var $selected = $('#myselect select option:selected');
  if (!$selected.hasClass('added')) {
  $('<li />', {
    'data-value': $selected.val(),
    text: $selected.text()
    }).appendTo('#events');
    $selected.addClass('added')
    }
  $("#events").show();
});
});

HTML

---

如果要显示图像url，则可以对每个选项使用数据img属性，如下所示

$function{ $events.hide； $myselect.changefunction{ var$selected=$'myselect选择选项：selected'； 如果！$selected.hasClass'added'{ $, { “数据值”：$selected.val， text:$selected.text }.prepend.appendTo'events'； $selected.addClass'added' } $events.show； }; }; 事件李{ 列表样式：无； 边缘顶部：5px； 边框：1px纯红； 背景颜色：浅灰色； } 李：第一个孩子{ 边际上限：0； } 将事件添加到位置 如果您以前为您的数字横幅创建过模板，请从列表中选择该模板，否则请选择“无模板”

选择 测验 测试 您可以添加在MyApplication中创建的事件

---

你有一个css类来显示图像。。。还是图像url？我使用的是虚拟数据，因此任何相对路径或绝对路径http url都有效。我将在应用程序中使用relative。为了便于演示，这里有一个使用的图像链接，请参见下面的答案。。。。它使用一个图像url

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.2.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>


<div class="row">
  <div class="col-md-12">
    <h3>Add Event To Location</h3>
    <div class="row">

      <div class="row">
        <div id="myselect" class="col-md-12">

          <p>If you have previously created a template for your digital banner please select it from the list, otherwise select no template.</p>
          <form>
            <select id="whatever" name="name_of_selectbox">
              <option value="">Select</option>
              <option value="1">Test</option>
              <option value="2">Testing</option>
            </select>
          </form>
          <hr/>
        </div>
      </div>
    </div>
  </div>
  <p></p>

</div>
<ul id="events"></ul>

CSS

#events li{
  list-style: none;
  margin-top: 5px;
  border: 1px solid red;
  background-color: lightgrey;
}
#events li:first-child{
  margin-top: 0;
}