Is it possible to make a dynamic select?

Question

JavaScript

There are forms dynamically generated from yii2, the number of dropdowns is unknown.
Is it possible to write a script in angular that will take the number of select in json, split them into three columns (col-md-3)
on the screen and adjust the width of the option to the length of the maximum word? And if the select is obtained with a length of a certain value, then allocate a separate row for it.

I’m not trying to get a solution here (I’ll order the script for freelancing), I want to understand whether it’s generally done in angular or somewhere else.

Answer 1

"Is it possible" - yes, it is possible.
But if you only need this, then it's better to nagovnokodit on jQuery. Angular is like a cannon to sparrows here.

Answer 2

We have coded the following plugin:

(function($) {
    var defaults = {
        columns: 3,
        classname: 'column',
        min: 1,
        colsize: 16
    };


    $.fn.autocolumnlist = function(params) {

        return this.each(function() {
            var options = $.extend({}, defaults, params);
            var els = $(this).children('li');
            var dimension = els.size();

            if (options.columns == 'auto') {
                options.columns = Math.ceil(dimension / options.colsize);
            }

            if (dimension > 0 && options.columns > 1) {
                var elCol = Math.ceil(dimension / options.columns);
                if (elCol < options.min) {
                    elCol = options.min;
                }
                var start = 0;
                var end = elCol;

                for (i = 0; i < options.columns; i++) {
                    // Add "last" class for last column
                    if ((i + 1) == options.columns) {
                        els.slice(start, end).wrapAll('<div class="' + options.classname + ' сlast" />');
                    } else {
                        els.slice(start, end).wrapAll('<div class="' + options.classname + '" />');
                    }
                    start = start + elCol;
                    end = end + elCol;
                }
            }
        });
    };
})(jQuery);

It is applied like this:

<ul class="need_to_columns">
    <li></li>
    ...
</ul>

$('.need_to_columns').autocolumnlist({
        columns: 3,
        classname: 'column'
    });