JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <link href="http://ivaynberg.github.com/select2/select2-3.3.0/select2.css" rel="stylesheet"/>
        <script src="http://ivaynberg.github.com/select2/select2-3.3.0/select2.js"></script>
    </head>
    <body>
Attribute:
<select name="attribute" id="attribute">
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

Value:
<input id="value" type="hidden" style="width:300px"/>
        
    </body>
</html>

JavaScript

$(function() {
    var data = [
        [{id:0,text:'black'},{id:1,text:'blue'}],
        [{id:0,text:'9'},{id:1,text:'10'}]
    ];

    $('#attribute').select2({allowClear: true}).on('change', function() {
        $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()],allowClear: true});
    }).trigger('change');
});