Create a custom dropdown and link to a block

In this example we want to create a custom dropdown that will display in columns using bootstrap. We want the value to either populate a hidden text block or a block dropdown.

Step 1 create the bootstrap dropdown. Add it to the bootstrap Main Layout.

  <style>

        .dropdown-menu.dropdown-multicol2 {

            display: flex;

            flex-wrap: wrap;

        }

        .dropdown-menu .dropdown-col {

            flex: 1 1 33.3333%; /* Adjust this value to have more or fewer columns */

            padding: 0 10px; /* Add padding between columns */

        }

    </style>

    <div class="row">

        <div class="col-md-5" style="text-align:left; padding:0 5px;">

            {Description}

            <div class="dropdown">

                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                    Multi - columns

                </button>

                <div class="dropdown-menu dropdown-multicol2" aria-labelledby="dropdownMenuButton">

                    <div class="dropdown-col">

                        <a class="dropdown-item" href="#" data-value="Gold">Gold</a>

                        <a class="dropdown-item" href="#" data-value="Silver">Silver</a>

                    </div>

                    <div class="dropdown-col">

                        <a class="dropdown-item" href="#" data-value="Platinum">Platinum</a>

                        <a class="dropdown-item" href="#" data-value="Bronze">Bronze</a>

                    </div>

                    <div class="dropdown-col">

                        <a class="dropdown-item" href="#" data-value="Aluminum">Aluminum</a>

                        <a class="dropdown-item" href="#" data-value="Copper">Copper</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

Step 2 is to create either a dropdown or a text input.

Get the id of the text input or the dropdown (see this article Link the block Dropdown to a product Option)

in this example we are populating both the dropdown and the input but you only need to use 1.

Copy and replace this code with the proper ids.

<script>

        $(document).ready(function() {

            $('.dropdown-item').on('click', function(e) {

                e.preventDefault();

                var selectedValue = $(this).data('value');

                $('#dropdownMenuButton').text(selectedValue);

                $('#Input688323').val(selectedValue);

                $('#Input688324').val(selectedValue);

            });

        });

    </script>

Sample in action:

https://live.w2pstore.com/Store/Default.aspx?PUID=95ae4f852eeb4de2bcaa21f4b3ed5b0a&Guest=1&CUR=dab7b478fc244d0b8955845f924ab8d7