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 - 元素的属性，jquery中有一个特殊的.data()函数：

$( 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'>

php - echo select value without submit

2 个答案: