$('.select').each(function(){
// Variables
var $this = $(this),
selectOption = $this.find('option'),
selectOptionLength = selectOption.length,
selectedOption = selectOption.filter(':selected'),
dur = 500;
$this.hide();
// Wrap all in select box
$this.wrap('<div class="select"></div>');
// Style box
$('<div>',{
class: 'select__gap',
text: 'Please select' //Placeholder
}).insertAfter($this);
var selectGap = $this.next('.select__gap'),
caret = selectGap.find('.caret');
// Add ul list
$('<ul>',{
class: 'select__list'
}).insertAfter(selectGap);
var selectList = selectGap.next('.select__list');
// Add li - option items
for(var i = 0; i < selectOptionLength; i++){
$('<li>',{
class: 'select__item',
html: $('<span>',{
text: selectOption.eq(i).text()
})
})
.attr('data-value', selectOption.eq(i).val())
.appendTo(selectList);
}
// Find all items
var selectItem = selectList.find('li');
selectList.slideUp(0);
selectGap.on('click', function(){
if(!$(this).hasClass('on')){
$(this).addClass('on');
selectList.slideDown(dur);
selectItem.on('click', function(){
var chooseItem = $(this).data('value');
$('select').val(chooseItem).attr('selected', 'selected');
selectGap.text($(this).find('span').text());
selectList.slideUp(dur);
selectGap.removeClass('on');
});
} else {
$(this).removeClass('on');
selectList.slideUp(dur);
}
});
});
/* #wgtmsr{
width:150px;
}
#wgtmsr option{
width:100px;
} */
/* Стилизация селекта для примера: */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Выпадающий список: */
.select ul {
padding: 0;
margin: 0;
list-style-type: none;
border: 1px solid #0095ff;
width:100px;
}
/* Пункт списка: */
.select ul li {
padding: 5px;
}
/* Наведение на пункт списка: */
.select ul li:hover {
background: #0095ff;
color: #fff;
}
/* Выбор option "Please Select": */
.select__gap {
position: relative;
padding: 5px;
width:150px;
border: 1px solid #ccc;
padding-right: 10px;
}
/* Стрелочка: */
.select__gap:after {
content: '';
position: absolute;
right: 5px;
top: 10px;
border-top: 5px solid #000;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<select name="wgtmsr" id="wgtmsr" class="select">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric adwd wad wad awd awd awd wad w adw ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>