DropDown Multiple Select Max (SOLVED)

[HyperOsmar]

Dear Colleagues...

I have a DropDown element with the option "Multiple Selections" enabled, but I have to limit the amount to a maximum of 03 options.

Can someone help me???...

 

[lousyfool]

E.g. https://jsfiddle.net/cdog/nm60u4v9/

 

[HyperOsmar]

@lousyfool

I appreciate the feedback. It's exactly what I want.

But how would I do it using Element DropDown???...

Tks...

 

[lousyfool]

The fiddle is an example of code. Of course, you need to adjust it, e.g to target your select element, etc.

 

[troester]

http://fabrikar.com/forums/index.php?wiki/dropdown-selections-unique-in-repeat-group/

 

[HyperOsmar]

The fiddle is an example of code. Of course, you need to adjust it, e.g to target your select element, etc.

I don't know exactly where and how to put the sample code...

If I want to add a JavaScript inside the DropDown element, how should I proceed???...

 

[lousyfool]

Here's the Wiki on adding JS to a form: http://fabrikar.com/forums/index.php?wiki/form-javascript/

 

[HyperOsmar]

Dear colleagues,

Even following your tips, I still couldn't configure the DropDown element to accept a maximum value of options.

Can someone help me???...

 

[lousyfool]

What exact code are you using, and where?

 

[HyperOsmar]

What exact code are you using, and where?

@lousyfool, i tried using the code suggested by you (E.g. https://jsfiddle.net/cdog/nm60u4v9/).

 

[lousyfool]

The fiddle is an example of code. Of course, you need to adjust it, e.g to target your select element, etc.

So, still:

What exact code are you using, and where?

 

[HyperOsmar]

@lousyfool,

I'm trying to insert that code into the DropDown element itself, through the JavaScript Code plugin.

 

[lousyfool]

Sigh......

What exact code ...?

 

[HyperOsmar]

var $chosen = $('.chosen-select').chosen({
max_selected_options: 2
});

$chosen.change(function () {
var $this = $(this);
var chosen = $this.data('chosen');
var search = chosen.search_container.find('input[type="text"]');

search.prop('disabled', $this.val() !== null);

if (chosen.active_field) {
search.focus();
}
});

 

[HyperOsmar]

Inside the Custom Code (Template):

.chosen-select {
width: 350px;
}

 

[lousyfool]

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.

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.

 

[HyperOsmar]

@lousyfool, thank you so much.
Your example was perfect.