JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<select id="fruits" style="width: 150px">
    <option value="apple" selected>Apples</option>
    <option value="pear">Pears</option>
</select>
<select id="quantities" style="width: 150px"></select>

JavaScript

var pageData = {
    products: {
        apple: {
            quantities: {
                "1kg": "Apples (1kg)",
                    "2kg": "Apples (2kg)",
            }
        },
        pear: {
            quantities: {
                "1kg": "Pears (1kg)",
                    "2kg": "Pears (2kg)",
            }
        }
    }
};

var initQuantitiesDropdown = function () {
    var options = [];
    var selectedFruit = $("#fruits").val();
    $.each(pageData.products[selectedFruit].quantities, function (key, value) {
        options.push({
            text: value,
            id: key
        });
    })
    $("#quantities").empty().select2({
        data: options
    });
};

$("#fruits").select2().change(initQuantitiesDropdown);
initQuantitiesDropdown();