Используя плагин semantic-ui, как сделать чтобы у двух select можно было менять value между собой?

То есть нажимая на кнопку у первого select option становился как у второго, а у второго, как у первого

 <link rel="stylesheet" href="  https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">


<div class="select select-1 ui labeled icon top right pointing dropdown button">
        <span class="text">
            <img class="ui avatar image" src="./img/banks/alfa-bank.png">
            Bitcoin (BTC)</span>
        <div class="menu">
            <div class="header">Криптовалюты</div>
            <div class="item active selected">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Bitcoin (BTC)</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Ethereum (ETH)</div>
            <div class="divider"></div>

            <div class="header">Банки</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Альфа-банк</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                MasterCard</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Сбербанк</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Visa</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Тинькофф</div>
            <div class="item"><img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Приват Банк</div>
        </div>
    </div>

    <button class="select-swap">change</button>

    <div class="select select-1 ui labeled icon top right pointing dropdown button">
        <span class="text">
            <img class="ui avatar image" src="./img/banks/alfa-bank.png">
            Ethereum (ETH)</span>
        <div class="menu">
            <div class="header">Криптовалюты</div>
            <div class="item active selected">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Bitcoin (BTC)</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Ethereum (ETH)</div>
            <div class="divider"></div>

            <div class="header">Банки</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Альфа-банк</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                MasterCard</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Сбербанк</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Visa</div>
            <div class="item">
                <img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Тинькофф</div>
            <div class="item"><img class="ui avatar image" src="./img/banks/alfa-bank.png">
                Приват Банк</div>
        </div>
    </div>
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.jss"></script>
//Плагин 
$('.select').dropdown();


//Код для кнопки, но он работает только при стандартном select с option
let changeButton = document.querySelector('.select-swap');

function chaangeSelect(e) {
    let selectOne = document.querySelector('.select-1');
    let selectTwo = document.querySelector('.select-2');
    let valOne = selectOne.value;
    selectOne.value = selectTwo.value
    selectTwo.value = valOne
}

changeButton.addEventListener('click', chaangeSelect)

Ответы (0 шт):