title: select2 changing items dynamically
body: <p>I have two selects that are linked: Each value of the first select determines which items will be displayed in the second select.</p>
  
  <p>The values of the second select are stored in a two-dimension array:</p>
  
  <pre><code>[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
    [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
    ...
  ]
  </code></pre>
  
  <p>The first select value determines the index to be used to populate the second select. So in a 'change' event on the first I should be able to modify the items select-two contains.</p>
  
  <p>Reading documentation I think I need to use the "data" option... but not shure how as the example loads the array data on initialization and it seems to don't work if I try to do the same after initialization.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>Attribute:
  &lt;select name="attribute" id="attribute"&gt;
      &lt;option value="0"&gt;Color&lt;/option&gt;
      &lt;option value="1"&gt;Size&lt;/option&gt;
  &lt;/select&gt;
  
  Value:
  &lt;select name="value" id="value"&gt;&lt;/select&gt;
  
  &lt;script&gt;
     var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
                  [{"id":"1","text":"9"},{"id":"1","text":"10"},...],
                ];
     $('#attribute').select2().bind('change', function(){
        // Here I need to change `#value` items.
        $('#value').select2('data',data[$(this).val()]);  // This does not work
     );
  
     $('#value').select2();
  &lt;/script&gt;
  </code></pre>