reshad reshad - 7 months ago 19
HTML Question

Add customised <option> to all existing <options>s

I have this

styled-select
which I made due to my requirements. Now I want to add a customised
<option>
to the bottom of all existing options. The style of this last option is shown below in the picture:

Last Option Image

The CSS referred to this customised option is:

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


After resolving the problem of not appearing the
class="lastOne"
as expected in my options, I want to know is it possible add this option to my existing options using 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
updated working fiddle. i think its solve your problem        

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