javascript - php - 送信せずに選択値をエコー

Question

私は現在、サイズや色のセレクターが組み込まれていない snipcart を使用する衣料品のウェブサイトを持っているので、何を送信すればよいかを知ることができるように、説明にそれを入れて自分で行う必要があります. とにかく、選択した色とサイズの値をボタンデータにエコーする必要があります。

これは私のコードです:

<?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>