Selectron from tag div:


Select GBP in 1 | Add JPY to 1 | Selected value in 1: uah
Select GBP in 2 | Add JPY to 2 | Selected value in 2: uah


Fusion applied to usual drop-down:


Selected value: -

Created by code:

        
//demo
document.getElementById('drop-down-example3').addEventListener('change', function () {
    console.log('event attached to the  to fuse titles by keys with options description here
    max_open_height: 200, //max height (px) of opened drop-down when vertical scroll appears
};

var selector1 = new Selectron23(document.querySelector('#block-example'), data1);

let data2 = Object.assign({}, data1);
data2.imgpos = 'left';
delete data2.max_open_height;
var selector2 = new Selectron23(document.querySelector('#block-example2'), data2);

//html5 drop-down wrapping
var selector3 = new Selectron23(document.querySelector('#drop-down-example3'), {});


//demo
selector1.onSelect = function () {
    console.log('selector1', this.value);
    document.getElementById('selector1-value').innerText = this.value;
};

selector2.onSelect = function () {
    console.log('selector2', this.value);
    document.getElementById('selector2-value').innerText = this.value;
};

selector3.onSelect = function () {
    console.log('selector3', this.value);
    document.getElementById('selector3-value').innerText = this.value;
};

function add_currency(value, num = 1) {

    let selector = null;
    if (parseInt(num) === 1) {
        selector = selector1;
    } else {
        selector = selector2;
    }

    if (selector.append({
        value: value,
        title: 'JPY',
        text: 'Japan Yen',
        img: 'https://pluginus.net/wp-content/uploads/2021/03/japan.gif'
    })) {
        selector.select(value);
    } else {
        alert('JPY already in!');
}
}

        
        



DOWNLOAD SCRIPT AND DEMO