var $chosen = $('.chosen-select').chosen({
max_selected_options: 2
});
..........
As I said above, such example code, especially from a 3rd-party source like a fiddle,
must be adjusted, because it'll make no sense at all in your environment, very obviously.
As I also indicated, such (adjusted) code would be for use in a form_XX.js file, as per linked Wiki article.
If you want to use element JS, you should have followed
@troester's Wiki link, plus look up
http://fabrikar.com/forums/index.php?wiki/element-javascript-advanced/
So........
Set "Event" to "change", then use e.g.
Code:
var max_opts = 3;
var opts_count = this.element.selectedOptions.length;
if (opts_count > max_opts) {
/* Do what you need to do, e.g. alert: */
alert('You can select only up to '+max_opts+' options');
/* and/or deselect all options: */
this.element.value = '';
}
Note: the above code only works with a standard multiple select dropdown, not with "Enhanced Dropdown" enabled. If you want to use an enhanced dropdown, you'll need to make further adjustments... and now you should know how or where to find the code.
Finally...
Inside the Custom Code (Template):
.chosen-select {
width: 350px;
}
That's CSS alongside the fiddle example. Neither has it functional value nor will it do anything in Fabrik as the class is used nowhere. So, you can delete that again.