JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<select id="select1">
    <option disabled selected>Please select an option.</option>
    <option>Option One</option>
    <option>Option Two</option>
</select>

<select id="select2">
    <option>g</option>
    <option>b</option>
    <option>j</option>
    <option>c</option>
    <option>d</option>
    <option>h</option>
    <option>e</option>
    <option>h</option>
    <option>a</option>
    <option>i</option>
    <option>f</option>
</select>

JavaScript

$(document).on('change', '#select1', function(){
    var options = $('#select2 option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
});