Hello dear users of the site, do not judge strictly. with js complicated. How to make such a Select so that there are items inside that can be selected and there is a button below.

Maybe there is some kind of plugin?

  • Hello. This is not a select, select is not to impose this, it is not even worth trying, although it is possible to study this question. Select is taken and hidden by CSS. Then the usual list ul> li is taken, its items will be as in ours select, it will be styled as needed. By means of JS, we track clicks on our list (ul) and transfer the item selected by the user to select, ready. Take action. - Alexander Kazakov

1 answer 1

The problem you have is not with JavaScript, but in general with an understanding of the layout, namely how such drop-down lists are implemented.

Select is taken and hidden by CSS. Next, the usual list is created: ul>li , it will have items like ours select, styled as needed. Using JS, we monitor clicks on our list (ul) and transfer the item selected by the user to select. Is done.

 $('.sorting-dropdown-select').click(function(event) { event.preventDefault(); $(this) .next('.sorting-dropdown') .slideToggle('400'); $(this).toggleClass('sorting-dropdown-select-active'); }); $('.sorting-dropdown-item-link').click(function(event) { event.preventDefault(); var selectValue = $(this).html(); var selectDataId = $(this).attr('data-id'); $('.sorting-dropdown-select') .html(selectValue) .toggleClass('sorting-dropdown-select-active') .next('.sorting-dropdown') .slideToggle('400'); $('select[name="sorting-select"]') .removeAttr('selected') .find('option[value="' + selectDataId + '"]') .prop('selected', true); }); 
 .hide { display: none; } .container { max-width: 1170px; margin: 0 auto; width: 100%; } .sorting-title { color: #999; display: block; font-size: 15px; margin-right: 5px; } .sorting-select-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; min-width: 254px; position: relative; } .sorting-dropdown-select { color: #000; font-size: 15px; font-weight: 700; position: relative; text-decoration: none; } .sorting-dropdown-select:hover { color: #000; } .sorting-dropdown-select:before { background-image: -webkit-gradient( linear, left top, right top, color-stop(33%, black), color-stop(0%, rgba(255, 255, 255, 0))); background-image: linear-gradient( to right, black 33%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 3px 1px; background-repeat: repeat-x; bottom: 0; content: ''; height: 1px; left: 0; position: absolute; width: 100%; } .sorting-dropdown-select.sorting-dropdown-select-active { color: #e2001a; } .sorting-dropdown-select.sorting-dropdown-select-active:before { display: none; } .sorting-dropdown { background-color: #fff; -webkit-box-shadow: 0px 17px 14px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 17px 14px 0px rgba(0, 0, 0, 0.05); display: none; left: 0; overflow: hidden; position: absolute; top: 100%; width: 100%; z-index: 5; } .sorting-dropdown .sorting-dropdown-items { list-style: none; margin: 13px 0 0; padding-left: 0; } .sorting-dropdown .sorting-dropdown-item-link { color: #000; display: block; font-size: 15px; font-weight: 400; padding: 5px 30px; transition: all 0.3s; } .sorting-dropdown .sorting-dropdown-item-link:hover { background-color: #f5f5f5; } .red-btn { background-color: red; color: #ffffff; display: inline-block; margin: 10px 0 10px 30px; padding: 5px; } button[type='submit'] { margin-top: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <form action="#" class="sorting-form"> <!-- begin Hiding Select --> <select name="sorting-select" class="hide"> <option value="priceLow">Цена по возростанию</option> <option value="priceHigh">Цена по убыванию</option> <option value="nameAZ">По названию А-Я</option> <option value="nameZA">По названию Я-А</option> </select> <!-- end Hiding Select --> <!-- begin Select Custom --> <div class="sorting-select-area"> <span class="sorting-title d-block">Сортировка:</span> <a href="#" class="sorting-dropdown-select">Цена по возрастанию</a> <!-- begin Sorting Dropdown --> <div class="sorting-dropdown"> <ul class="sorting-dropdown-items"> <li class="sorting-dropdown-item"> <a href="#" data-id="priceLow" class="sorting-dropdown-item-link">Цена по возрастанию</a> </li> <li class="sorting-dropdown-item"> <a href="#" data-id="priceHigh" class="sorting-dropdown-item-link">Цена по убыванию</a> </li> <li class="sorting-dropdown-item"> <a href="#" data-id="nameAZ" class="sorting-dropdown-item-link">По названию А-Я</a> </li> <li class="sorting-dropdown-item"> <a href="#" data-id="nameZA" class="sorting-dropdown-item-link">По названию Я-А</a> </li> <li class="sorting-dropdown-item"> <a href="#" class="red-btn">Добавить адрес</a> </li> </ul> </div> <!-- end Sorting Dropdown --> </div> <!-- end Select Custom --> <button type="submit">Отправить</button> </form> </div>

And here is an example where our select is not hidden and it is clear what is happening here:

 $('.sorting-dropdown-select').click(function(event) { event.preventDefault(); $(this) .next('.sorting-dropdown') .slideToggle('400'); $(this).toggleClass('sorting-dropdown-select-active'); }); $('.sorting-dropdown-item-link').click(function(event) { event.preventDefault(); var selectValue = $(this).html(); var selectDataId = $(this).attr('data-id'); $('.sorting-dropdown-select') .html(selectValue) .toggleClass('sorting-dropdown-select-active') .next('.sorting-dropdown') .slideToggle('400'); $('select[name="sorting-select"]') .removeAttr('selected') .find('option[value="' + selectDataId + '"]') .prop('selected', true); }); 
 .container { max-width: 1170px; margin: 0 auto; width: 100%; } .sorting-title { color: #999; display: block; font-size: 15px; margin-right: 5px; } .sorting-select-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; min-width: 254px; position: relative; } .sorting-dropdown-select { color: #000; font-size: 15px; font-weight: 700; position: relative; text-decoration: none; } .sorting-dropdown-select:hover { color: #000; } .sorting-dropdown-select:before { background-image: -webkit-gradient( linear, left top, right top, color-stop(33%, black), color-stop(0%, rgba(255, 255, 255, 0))); background-image: linear-gradient( to right, black 33%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 3px 1px; background-repeat: repeat-x; bottom: 0; content: ''; height: 1px; left: 0; position: absolute; width: 100%; } .sorting-dropdown-select.sorting-dropdown-select-active { color: #e2001a; } .sorting-dropdown-select.sorting-dropdown-select-active:before { display: none; } .sorting-dropdown { background-color: #fff; -webkit-box-shadow: 0px 17px 14px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 17px 14px 0px rgba(0, 0, 0, 0.05); display: none; left: 0; overflow: hidden; position: absolute; top: 100%; width: 100%; z-index: 5; } .sorting-dropdown .sorting-dropdown-items { list-style: none; margin: 13px 0 0; padding-left: 0; } .sorting-dropdown .sorting-dropdown-item-link { color: #000; display: block; font-size: 15px; font-weight: 400; padding: 5px 30px; transition: all 0.3s; } .sorting-dropdown .sorting-dropdown-item-link:hover { background-color: #f5f5f5; } .red-btn { background-color: red; color: #ffffff; display: inline-block; margin: 10px 0 10px 30px; padding: 5px; } button[type='submit'] { margin-top: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <form action="#" class="sorting-form"> <!-- begin Hiding Select --> <select name="sorting-select" class="hide"> <option value="priceLow">Цена по возростанию</option> <option value="priceHigh">Цена по убыванию</option> <option value="nameAZ">По названию А-Я</option> <option value="nameZA">По названию Я-А</option> </select> <!-- end Hiding Select --> <!-- begin Select Custom --> <div class="sorting-select-area"> <span class="sorting-title d-block">Сортировка:</span> <a href="#" class="sorting-dropdown-select">Цена по возрастанию</a> <!-- begin Sorting Dropdown --> <div class="sorting-dropdown"> <ul class="sorting-dropdown-items"> <li class="sorting-dropdown-item"> <a href="#" data-id="priceLow" class="sorting-dropdown-item-link">Цена по возрастанию</a> </li> <li class="sorting-dropdown-item"> <a href="#" data-id="priceHigh" class="sorting-dropdown-item-link">Цена по убыванию</a> </li> <li class="sorting-dropdown-item"> <a href="#" data-id="nameAZ" class="sorting-dropdown-item-link">По названию А-Я</a> </li> <li class="sorting-dropdown-item"> <a href="#" data-id="nameZA" class="sorting-dropdown-item-link">По названию Я-А</a> </li> <li class="sorting-dropdown-item"> <a href="#" class="red-btn">Добавить адрес</a> </li> </ul> </div> <!-- end Sorting Dropdown --> </div> <!-- end Select Custom --> <button type="submit">Отправить</button> </form> </div>

  • one
    Thank you very much. - Evgeny Bondarenko