|
Сообщение от CryNet
|
|
чтобы при выборе в одном селекте, в другом выбиралось тоже самое.
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<div>
<select id="sel1">
<option>1</option>
<option value='2' selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<br>
<div>
<select id="sel2">
<option>1</option>
<option value='2'>2</option>
<option selected>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<script>
/* Скармливаем селекты библиотеке */
function choicesInit(select, param) {
const elements = Array.from(document.querySelectorAll(select))
// Если есть атрибут '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
}
const sel = choicesInit('select', {searchEnabled: false, shouldSort: false, itemSelectText: ''});
sel[0].passedElement.element.addEventListener('change', function(event) { sel[1].setChoiceByValue(event.detail.value)})
sel[1].passedElement.element.addEventListener('change', function(event) { sel[0].setChoiceByValue(event.detail.value)})
</script>
</body>
</html>