Question

此代码适用于下拉，定位所选选项并在选中时在另一个div中显示每个选项。感谢@Arun P Johny的帮助。但是，我需要为所选的每个选项传递一个唯一的图片，该图片显示在不同的div中。我如何在jquery中添加它？因为css只显示每个选定选项的按钮。这是一个屏幕截图，以提供更好的理解。 http://postimg.org/image/km36m9jpp/24794463/

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

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

Answer 1

如果您要显示图片网址，则可以针对每个选项使用data-img属性，如下所示

$(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()
      }).prepend('<img src="' + $selected.data('img') + '"/>').appendTo('#events');
      $selected.addClass('added')
    }
    $("#events").show();
  });
});

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

<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="" data-img="//placehold.it/32x32/ff0000&text=Select">Select</option>
              <option value="1" data-img="//placehold.it/32x32/00ff00&text=Test">Test</option>
              <option value="2" data-img="//placehold.it/32x32/0000ff&text=Testing">Testing</option>
            </select>
          </form>
          <hr/>
        </div>
      </div>
    </div>
  </div>
  <p>You can add an event created in MyApplication.</p>

</div>
<ul id="events"></ul>

通过显示每个选定值选项传递唯一图像

1 个答案: