Доступ к выбранному значению атрибута продукта на странице продукта WooCommerce

Question

Я строю магазин, в котором есть несколько вариантов товара. Я хочу, чтобы на основе выбора пользователя в элементе select (это атрибут продукта) были скрыты другие элементы.

Я написал код javascript, который добавляется в функции. php file для доступа к значению элемента select всякий раз, когда пользователь изменяет значение элемента. Событие запускается правильно, но я всегда получаю индекс или значение первого элемента при доступе к нему, даже если выбран другой вариант.

Это код в функциях. php:

    function set_select_event()
    {
        global $post;
        $product = wc_get_product($post->ID);
        if ($product->get_id() == "1365") {
        ?>
        <script>
        jQuery(document).ready(function($) {
            $('input.variation_id').change( function(){
                if( '' != $('input.variation_id').val() ) {
                    var var_id = $('input.variation_id').val();
                    var sel = document.getElementById("numerado");
                    var opcion = sel.value;
                    alert('You just selected variation #' + opcion);

                }
             });
        });
        </script>
        <?php
        }
    }

И я подключаю эту функцию к событию 'woocommerce_single_product_summary' следующим образом:

add_action('woocommerce_single_product_summary', 'set_select_event');

Я также пробовал с этим:

    function set_select_event()
    {
        global $post;
        $product = wc_get_product($post->ID);
        if ($product->get_id() == "1365") {
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Get the live selected value
            $('select#numerado').blur( function(){
                selectedValue = $('select#numerado option:checked').val();

                // Display on browser console (for test)
                console.log(selectedValue);
            });
        });
        </script>
        <?php
        }
    }

Элемент выбора I ' m пытается получить доступ, выглядит так:

<select id="numerado" class="" name="attribute_numerado" data-attribute_name="attribute_numerado" data-show_option_none="yes">
    <option value="">Elige una opción</option>
    <option value="Sin numerar">Sin numerar</option>
    <option value="Numerado">Numerado</option>
</select>

Вот изображение того, что говорит отладчик:

Как я сказал, он получил значение "", которое является первым элементом.

Answer 1

Вы очень близко ... Чтобы получить выбранное значение из раскрывающегося списка атрибута "numerado", попробуйте:

add_action('woocommerce_single_product_summary', 'get_selected_product_attr_value');
function get_selected_product_attr_value()
{
    if ( get_the_id() == 1365 ) :
    ?>
    <script>
    jQuery(function($) {
        var a = 'select#numerado', 
            b = $(a).val(); // Get default selected value

        // Display the default selected value if not empty
        if( b != '' )
            console.log(b);

        // Get the live selected value
        $(a).blur( function(){
            b = $(this).val(); // Update default selected value

            // Display selected value on browser console (for test) if not empty
            if( b != '' )
                console.log(b);
        });
    });
    </script>
    <?php
    endif;
}

Код входит в functions. php файл вашей активной дочерней темы (или активной темы) . Протестировано и работает.

Я добавил код, чтобы получить выбранное значение по умолчанию, когда оно не пустое ... Если оно вам не нужно, вы можете легко его удалить.