JSFiddle - React, Tailwind, and code Playground

HTML

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

Value:
<input id="value" type="hidden" style="width:300px" data-placeholder="placeholder text"/>

JavaScript

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

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