php - echo select value without submit

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> 

Answer 1

Ваше требование может быть достигнуто только с помощью какого-либо языка на стороне клиента сценариев, как 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()); 
    }); 
}); 

Working Fiddle

Updated Fiddle

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

Answer 2

Для установки 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'>