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">
    <option></option>
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

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

JavaScript

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

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