Hello! The site has a <select> need to remake it under the bootstrap dropdown (do not ask why)). Those. so that initially the list was not visible, but became visible only after pressing the button. Here is an example of what should happen: enter image description here

Those. There is a button that opens the list and the list itself. When you select any item from the list, the js event occurs, so you need to do it with <select>

  • Initially offered you a drop-down menu with click processing. Do you need SELECT? - Ruslan Semenov
  • And what is the problem to cause the same event by clicking on the dropdown element? - teran
  • @Ruslan Semenov, roughly you need a select that looks like a dropdown - r.mcreal
  • then I can only offer a click to change the size option in select and then back - Ruslan Semenov

1 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>

  • Semenov, thank you very much! Everything is working. Now another question has arisen, what if there are several such selections and they are formed in a cycle? Those. Now I have seven selektov and when I click on the button that opens the list all seven selek fall out at once, but I need to drop one definite which I clicked. How can I solve this problem? - r.mcreal
  • So give them different classes and everything - Ruslan Semenov
  • Semenov, the problem was that selects were output in a cycle and their number could vary. But that's all, figured out - r.mcreal
  • Semenov, For some reason, your code does not work correctly in mobile browsers ( - r.mcreal
  • More specifically, the styles have flown or nothing appears at all. I can't guess what's wrong. There are also no rules for the diva with the dropdown class - Ruslan Semenov