Javascript Break Select Option To Button

Cara memecah Select option menjadi tombol, dengan mengguanakan javascript anda bisa merubah tampilan select option Anda menjadi beberapa tombol sesuai option yang berada di dalam select. Ini sebuah variasi option jika Anda merasa ingin menampilkan pilihan menjadi tombol tapi terkenda dengan perubahan scriptnya. Anda dapat menambahkan javascript ini seta menyesuaikan class tombol nya untuk menjadikannya seperti tombol.

Before :

Select Color Red Blue Green Yellow Pink Purple Black White

After :

Select Color Red Blue Green Yellow Pink Purple Black White

        --- html ---
        <select class="input-select select-m" name="select-color" id="break">
            <option value="" selected="">Select Color</option>
            <option value="value-red">Red</option>
            <option value="value-blue">Blue</option>
            <option value="value-green">Green</option>
            <option value="value-yellow">Yellow</option>
            <option value="value-pink">Pink</option>
            <option value="value-purple">Purple</option>
            <option value="value-black">Black</option>
            <option value="value-white">White</option>
        </select>
        
        --- javascript ---
        $(document).ready(function(){
                var new_select = $('#break');
                var selectName = new_select.prop('name');
                var hidden = $('<input class="input-text input-m" type="text" name="'+selectName+'">');
                hidden.val(new_select.val());
                hidden.insertAfter(new_select)
                
                new_select.find('option').unwrap().each(function() {
                    if($(this).val()!=""){
                        var btn = $('<div class="btn-blue btn-m fit mg-m pointer left new_option" name="'+selectName+'" value="'+$(this).val()+'"> '+$(this).text()+'</div>');
                        $(this).replaceWith(btn);
                    } else {
                        $(this).replaceWith("");
                    }
                });

                $('.new_option').on('click', function() {
                $('.new_option[name="'+selectName+'"]').removeClass('btn-red');
                $(this).addClass('btn-red');
                $('input[name="'+selectName+'"]').val($(this).attr('value'));
                return true;
            });
        });

Style
irpie style : 2.0.0
Source : https://sites.google.com/site/excrostyle/css/2.0.0.css
Documentation : https://irpie-style.blogspot.com/2020/11/irpie-css-200.html

irpian, irpie, excrozer, bang irpie, excrozer design, programming, javascript, break, select, button, option, select like button, html, tutorial,