1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

DropDown Multiple Select Max (SOLVED)

Discussion in 'Community' started by HyperOsmar, Aug 27, 2021.

  1. HyperOsmar

    HyperOsmar Member

    Level: Community
    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???...
     
  2. lousyfool

    lousyfool Well-Known Member

    Level: Community
  3. HyperOsmar

    HyperOsmar Member

    Level: Community
    @lousyfool

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

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

    Tks...
     
  4. lousyfool

    lousyfool Well-Known Member

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

    troester Well-Known Member Staff Member

    Level: Community
  6. HyperOsmar

    HyperOsmar Member

    Level: Community
    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???...
     
  7. lousyfool

    lousyfool Well-Known Member

    Level: Community
  8. HyperOsmar

    HyperOsmar Member

    Level: Community
    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???...
     
  9. lousyfool

    lousyfool Well-Known Member

    Level: Community
    What exact code are you using, and where?
     
    HyperOsmar likes this.
  10. HyperOsmar

    HyperOsmar Member

    Level: Community
  11. lousyfool

    lousyfool Well-Known Member

    Level: Community
    So, still:

     
    HyperOsmar likes this.
  12. HyperOsmar

    HyperOsmar Member

    Level: Community
    @lousyfool,

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

    lousyfool Well-Known Member

    Level: Community
    Sigh......
     
  14. HyperOsmar

    HyperOsmar Member

    Level: Community
    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();
    }
    });
     
  15. HyperOsmar

    HyperOsmar Member

    Level: Community
    Inside the Custom Code (Template):

    .chosen-select {
    width: 350px;
    }
     
  16. lousyfool

    lousyfool Well-Known Member

    Level: Community
    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 (Text):

    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...
    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.
     
    Last edited: Sep 29, 2022 at 8:40 AM
    HyperOsmar likes this.
  17. HyperOsmar

    HyperOsmar Member

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

Share This Page