jquery - 将自定义的 <option> 添加到所有现有的 <options>

Question

我有这个styled-select这是我根据自己的要求制作的。现在我想添加一个定制的 <option>到所有现有选项的底部。最后一个选项的样式如下图所示:

引用此自定义选项的 CSS 是:

.lastOne {
  background-image: url(http://s31.postimg.org/ule20cjtj/left.png), url(http://s31.postimg.org/ydjsauv6f/right.png);
  background-position: left, right;
  background-repeat: no-repeat;
  background-color: white;
  height: 28px;
  width: 241px;
}

解决不出现class="lastOne"的问题后正如我的选项所预期的那样，我想知道是否可以使用 jQuery 将此选项添加到我现有的选项中？

Working jsFiddle

 $(function() {

   $('.styled-select select').hide();
   $("select#elem").val('0');

   $('.styled-select div').each(function() {
     var $container = $(this).closest('.styled-select');
     $(this).html($container.find('select option:selected').text());
   });

   $('.styled-select div').click(function() {
     var $container = $(this).closest('.styled-select');
     var opLen = $container.find('select').children('option').length;
     if (opLen < 5) {
       $container.find('select').show().attr('size', opLen).focus();
     } else {
       $container.find('select').show().attr('size', 5).focus();
     }
   });

   $('.styled-select select').click(function() {
     var $container = $(this).closest('.styled-select');
     var text = $container.find('select option:selected').text();
     $container.find('div').html(text);
     $container.find('select').hide();
   });

   $('.styled-select select').focusout(function() {
     var $container = $(this).closest('.styled-select');
     $container.find('select').hide();
   });

 });

.styled-select select {
  position: absolute;
  background: transparent;
  padding-top: 5px;
  font-size: 18px;
  font-family: 'PT Sans', sans-serif;
  color: black;
  border: 0;
  border-radius: 4;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  z-index: 1;
  outline: none;
  width: 241px;
  top: 29px;
  box-shadow: 0 2px 2px 0 #C2C2C2;
}
.styled-select {
  background: url('http://s31.postimg.org/om7atjdqv/campaign_Selector.png') no-repeat right;
  background-color: white;
  height: 28px;
  width: 241px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 2px 2px 0 #C2C2C2;
  background-position: 97% 50%;
  z-index: 100px;
}
.styled-select option {
  background-color: white;
  margin-left: 3px;
  width: 241px;
  font-size: 16px;
}
.lastOne {
  background-image: url(http://s31.postimg.org/ule20cjtj/left.png), url(http://s31.postimg.org/ydjsauv6f/right.png);
  background-position: left, right;
  background-repeat: no-repeat;
  background-color: white;
  height: 28px;
  width: 241px;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div class="styled-select">
  <div id="selectedDivId" style="margin-left: 5px; position: absolute;  width: 210px; top: 4px; height: 28px; text-overflow: ellipsis; padding: 0 30px 0 0; white-space: nowrap; overflow: hidden;"></div>
  <select id="fbCampaignId47_502" name="campaignStructureList[0].dataSourceModelList[0].campaignId" style="position: absolute">
    <option value="">--- Select ---</option>
    <option value="6040224291703">1st</option>
    <option value="6036780606903">2nd</option>
    <option value="6038009946703">3rd</option>
    <option value="6037196648903">4th</option>
    <option value="6038009946123">5th</option>
    <option value="6032323455203">6th</option>
    <option value="6037191235103">7th</option>
    <option class="lastOne"></option>
  </select>
</div>

<div style="height: 150px">
</div>
<div class="styled-select">
  <div id="selectedDivId" style="margin-left: 5px; position: absolute;  width: 210px; top: 4px; height: 28px; text-overflow: ellipsis; padding: 0 30px 0 0; white-space: nowrap; overflow: hidden;"></div>
  <select id="fbCampaignId47_502" name="campaignStructureList[0].dataSourceModelList[0].campaignId" style="position: absolute">
    <option value="">--- Select ---</option>
    <option value="6040224291703">1st</option>
    <option value="6036780606903">2nd</option>
    <option value="6038009946703">3rd</option>
    <option class="lastOne"></option>
  </select>
</div>

Answer 1

updated working fiddle. i think its solve your problem        

https://jsfiddle.net/1uudd95x/3/