JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select1" onChange="populateSelect2()">
    <option value="">Choose...</option>
</select>
<br/>
<select id="select2"></select>

JavaScript

var array1 = [1, 2, 3];
var array2 = [1, 1, 1, 1, 2, 2, 3, 3];

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");

window.onload = function () {

    // here we populate select1 with the elements in array1

    for (var i = 0; i < array1.length; i++) 
    {
        var opt = document.createElement('option');
        opt.value = array1[i];
        opt.innerHTML = array1[i];
        select1.appendChild(opt);
    }
}

function populateSelect2() 
{
    // first, empty select2

    for (var i = select2.options.length - 1; i >= 0; i--) 
    {
        select2.remove(i);
    }

    // then add new items
    // based on the selected value from select1 and matches from array2

    for (var i = 0; i < array2.length; i++) 
    {
        if (array2[i] == select1.value) 
        {
            var opt = document.createElement('option');
            opt.value = array2[i];
            opt.innerHTML = array2[i];
            select2.appendChild(opt);
        }
    }
}