Из <select> в dropdown

252

27 октября 2017, 12:16

Здравствуйте! На сайте есть <select> необходимо переделать его под бутстраповский dropdown (не спрашивайте зачем)). Т.е. чтобы изначально список не был виден, а стал виден только после нажатия на кнопку. Вот пример того что должно получиться:

Т.е. есть кнопка которая раскрывает список и сам список. При выборе какого-либо элемента из списка происходит событие js поэтому нужно сделать с помощью <select>

Answer 1

$('body').on('click', '.bnt', function(event) { 
  event.preventDefault(); 
  $('.dropdown').toggle(); 
}) 
 
$('body').on('click', '.dropdown', function(event) { 
  event.preventDefault(); 
  $('.dropdown').toggle(); 
})

select { 
  overflow: hidden; 
  border: none; 
  text-transform: uppercase; 
} 
 
option { 
  line-height: 20px; 
  padding: .5rem 1rem; 
  position: relative; 
} 
 
option::before { 
  content: ''; 
  display: block; 
  position: absolute; 
  left: 0; 
  width: 14px; 
  height: 14px; 
  border-radius: 50%; 
} 
 
option.grey::before { 
  background: grey; 
} 
 
option.green::before { 
  background: green; 
} 
 
option.yellow::before { 
  background: yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<div class="bnt">ЦВЕТ</div> 
<div class="dropdown" style="display: none"> 
  <select size="3" class="color" name="color"> 
  <option value="grey" class="grey">белый</option> 
  <option value="yellow" class="yellow">желтый</option> 
  <option value="green" class="green">зеленый</option> 
</select> 
</div>