JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/3.0.4/choices.js" integrity="sha512-+0WJVCnJZNbPi3oqDYOFig6jvU6mlQsIvnsZ6/pK6G9/WwaBqxxrgldnPFWeRX4EX0HL8yHqD22EPQrsuMdwjw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/3.0.4/styles/css/choices.css" integrity="sha512-ICTTnzK/HCX6G1JDVUC5ArasKTyvrPPG4V4xhE3mmgF79Pu3okwNw9HjMrV1KXO7Y6t2JHZzfX7FyAT5whB5XA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.js" integrity="sha512-jRu7VgfHgEVAPSNTNCaAgBrb5baW87LhMhspQmeXhrAekHX/TWH3eiUAnOBPaIvd1uLo7ggrFOjV1CY0qfXP9w==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.min.css" integrity="sha512-oFO6tEalxXf+64U5ImrvfeegDDlbUlrs3QBEIiVkYPyvFvs+UVFWJiixPJaJsnN0uJ7bHiRiGwXs5ZhYF9ZBzw==" crossorigin="anonymous" />
<select class="js-choice">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
</select>
CSS
.select_nano {
display: flex;
border-radius: 3px;
box-sizing: border-box;
height: 300px;
}
.choices__list.choices__list--dropdown,
.nano-content {
height: 300px;
}
JavaScript
function choicesInit(select, param) {
/** Передаём селекты и параметры. Например: choicesInit(element, { searchEnabled: false, shouldSort: false, itemSelectText: ''})
* где element - это айтемы полученные через document.querySelectorAll(".hourList .hourRow:last-child select")
* или choicesInit(".a20_articles select", { searchEnabled: false, shouldSort: false, itemSelectText: ''})
*/
let elements
if (typeof select === "string") {
elements = Array.from(document.querySelectorAll(`${select}`));
} else if (typeof select === "object") {
elements = Array.from(select);
} else {
console.error('Вай-вай-вай это ошибка. Неопознанный тип данных. Должен быть или string, или object');
}
// Если есть атрибут 'data-choice' - значит селект обрабатывался библиотекой - отбасываем его
const item = elements.filter(function (elements) {
if (!elements.getAttribute('data-choice')) {
return elements
}
});
const instances = item.map((element) => {
return new Choices(element, param)
});
return instances
}
choicesInit('.js-choice', {
searchEnabled: false,
shouldSort: false,
itemSelectText: '',
})
///////
function SelectNano() {
const target = $(".choices .choices__list--dropdown .choices__list")
target.each((id,element) => {
$(element).wrap("<div class='nano select_nano'></div>");
$(element).addClass("nano-content")
})
$(".choices .select_nano").nanoScroller({alwaysVisible: true});
$(".choices .nano-pane").show();
}
SelectNano();