bootstrap select

by knokit

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<select name="test">
  <option>opt 1</option>
  <option>opt 2</option>
  <option>opt 3</option>
  <option>ab daldkad adap ldpsd asd</option>
  <option>opt 5</option>
</select>

<div class="dropdown select">
  <button
    class="btn btn-sm btn-default dropdown-toggle"
    type="button"
    id="dropdownMenu1"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="true"
  >
    <span class="selected-label pull-left"></span>
    <span class="caret pull-right"></span>
  </button>
  
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="active"><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS

select {
  margin-bottom: 20px;
}

.select {
  width: 100px;
}

.dropdown.select > .btn {
  background: none !important;
  border-radius: 0px;
  width: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}
  
  .select > .btn > .selected-label {
    text-overflow: ellipsis;
    max-width: 80%;
  }

JavaScript

const updateLabel = () => {
  const $dropdown = $('.select');
  $dropdown.find('.selected-label').html(
    $dropdown.find('.active').text()
  );
};

updateLabel();

$('.select li').on('click', e => {
	const activeClass = 'active';
  const target = $(e.currentTarget);
  
  target
  	.siblings(`.${activeClass}`)
    .removeClass(activeClass);
  
  target.addClass(activeClass);
  updateLabel();
});