You really shouldn't need more than that picture to realize that changing the example from Massachutsetts to Joey Joe Joe (id "JO" in case you were wondering) is possible in select2 [as of today].  Though there's a hidden select (afaict now) holding all the options, the text box (or whatever it ends up being) below will take whatever data you push into it.  select2 is multiple; there are two UI widgets that talk to each other.  Don't expect it to act like one.

So to try for yourself...  Go to the select2 homepage with examples, and paste this into Firebug's console line:
$("#e8_2").select2("data", [{id: "CA", text: "California"},{id:"JO", text: "Joey Joe Joe Shabadoo"}]);

Then, for fun, try seeing what you'd pull out if you tried to get the data that's selected:
$("#e8_2_get2").click(function () { alert("Selected value is: "+JSON.stringify($("#e8_2").select2("data")));});

What would I have expected?  Better is a canonical list of data wrapped in an object somewhere that has valid ids, selected values, etc., with an integrated UI that bases contents off of that object's data.

select2 seems to handle data management via double-checking CSS classes and styles. That's not good code.  And if you try to make up an entry, like Joey Joe Joe, above, that should probably be denied by default.  No, that's not making injection significantly more difficult, but it would stop legacy code from 1899 from throwing "Cuba" into a list of US territories, you know?

Anyhow, no, no there's no validation or data storehouse or shared QA between the two widgets.  select2 is very lightly coupled.

Labels: ,