Issue adding jQuery to single product page in WooCommerce

Solution:

The code below will solve that problem. The display of the HTML (drop-down list) can be applied anywhere on the page via template overrides or via the desired hook.

In this answer I have combined both in one

function action_woocommerce_after_single_product_summary() {
    // Display drop-down list
    echo '<select class="frame">
            <option value="">Choose frame</option>
            <option value="">Without frame</option>
            <option value="20px solid red">Red</option>
            <option value="20px solid blue">Blue</option>
            <option value="20px solid yellow">Yellow</option>
          </select>';
    ?>
    <script>
    jQuery(document).ready(function($) {
        // On change
        $( 'select.frame' ).change( function() {
            var changeframe = $(this).children( 'option:selected' ).val();
            
            // DEBUG
            console.log(changeframe);
            
            // Add border
            $( '.woocommerce-product-gallery__wrapper' ).css( 'border', changeframe );
        });          
    });
    </script>
    <?php
}
add_action( 'woocommerce_after_single_product_summary', 'action_woocommerce_after_single_product_summary', 10, 0 );