php - эхо выберите значение без отправки

Question

У меня есть веб-сайт одежды, использующий снипкарту, который в настоящее время не имеет встроенного селектора размера или цвета, поэтому мне нужно сделать это самостоятельно, добавив его в описание, чтобы мы могли знать, что отправлять. В любом случае, мне нужно, чтобы выбранное значение цвета и размера отображалось в данных кнопки.

Это мой код:

<?php 
    echo"<h4 class='ct3'>COLOR</h4>
<select id='color' name='color'>
$colorsHTML;
</select>

<h4 class='ct3'>SIZE</h4>
<select name='size' id='size'>
$sizesHTML;
</select>

<br>
<br>
<button
    class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;'
    data-item-id='2'
    data-item-name='$name'
    data-item-price='$price'
    data-item-weight='0'
    data-item-url=''
    data-item-image='$image'
    data-item-description='$description'>
        ADD TO CART
</button>";
?>

Мне нужно, чтобы цвет и размер отображались в данных кнопки, чтобы она выглядела следующим образом:

    <?php
echo"<h4 class='ct3'>COLOR</h4>
    <select id='color' name='color'>
    $colorsHTML;
    </select>

    <h4 class='ct3'>SIZE</h4>
    <select name='size' id='size'>
    $sizesHTML;
    </select>

    <br>
    <br>
    <button
        class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;'
        data-item-id='2'
        data-item-name='$name'
        data-item-price='$price'
        data-item-weight='0'
        data-item-url=''
        data-item-image='$image'
        data-item-description='$description  COLOR=blue SIZE=XL'>
            ADD TO CART
    </button>";
?>

Я пробовал это: но я думаю, что мне понадобится код, чтобы изменить данные кнопки при изменении значения для выбора ввода

<button
    class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;'
    data-item-id='2'
    data-item-name='$name'
    data-item-price='$price'
    data-item-weight='0'
    data-item-url=''
    data-item-image='$image'
    data-item-description='$description COLOR = <script type='text/javascript'>
    $('#color').select(function() {
       var model=$('#color').val();
      alert(model);
     });</script>  SIZE = <script type='text/javascript'>
    $('#size').select(function() {
       var model=$('#size').val();
      alert(model);
     });
</script>'>
        ADD TO CART
</button>

Answer 1

Для настройки data -свойства элемента есть специальный .data() функция в jquery:

$( document ).ready( function() {

    $( "#size" ).change( function() { 
        // get value of a selected option
        var val = $( this ).val(); 
        // set data-attribute of a button
        $( "button" ).data( "color", val );
    } );

    $( "#color" ).change( function() { 
        // get value of a selected option
        var val = $( this ).val(); 
        // set data-attribute of a button
        $( "button" ).data( "size", val );
    } );
} );

Обратите внимание, что size а также color будут данные-атрибуты. Это означает, что в вашей кнопке они будут выглядеть так:

<button data-item-description='$description'  data-color='blue' data-size='XL'>

Answer 2

Ваше требование может быть достигнуто только с помощью некоторого клиентского языка сценариев, такого как JS или Jquery, например:

Html:

<select id="size">
  <option value="small">Small</option>
  <option value="large">Large</option>
</select>

<div id="response">
</div>

Jquery:

$(document).ready(function(){
    $('#size').change(function(){
    $('#response').html($(this).val());
    // $('#response').attr('data-item-description', $(this).val());
  });
});

Рабочая скрипка

Обновленная скрипка

Примечание: не забудьте включить библиотеку jquery