<!-- Start your project here-->

    <div>

        <div class="m-5" style="height: 100vh; width:800px;">

            <div class="row mt-5">

                <h2>Test Performance mdbSelect (500 Options ...)</h2>

            </div>

            <div class="row mt-5">

                <input type="button" value="Init Select" onclick="initData(500);"/>

                <p class="ml-5 mt-3">

                  Click once and the performance breaks down and the application needs about 1GB Ram

                </p> 

​

            </div>

            <div class="row mt-5">

                    <p>mdb select to fill:</p>

            </div>

            <div class="row "  style="border: 2px solid red;width:400px;">

                <select id="mdbSelect" class="mdb-select md-form w-100"  searchable="Search here..">              

                </select>

                <label class="mdb-main-label">Header Select</label>

            </div>

        </div>

    </div>

    <!-- Start your project here-->

​

   <script>

​

        function initData(count) {

            console.log("init start");

            var selectId = '#mdbSelect';

​

            $(selectId).material_select('destroy');

            $(selectId).empty();

​

            for (var i = 1; i <= count; i++) {

                var value = 1000000 + i;

                var optionvalue = "Optionvalue to Display -> " + value;

                $(selectId).append(new Option(optionvalue, value));

            };

​

            $(selectId).material_select();

​

            console.log("init stop");

        }

​

    </script>

​