如何通过 select 选项数量字段正确替换数量输入字段？

Question

我有一个带有数量输入字段的添加到购物车按钮，该按钮在我的网站上正常运行（见下图）：

当我在输入字段中输入例如 2 并按下添加到购物车按钮时，我的购物车会更新为 2 件商品。

但我想通过下拉字段更改数量输入字段，以便访问者只能 select 下拉列表中允许的数量之一。我可以正确配置下拉字段，但是当我点击添加到购物车按钮时（见下图），没有任何反应。

我想我需要在 javascript 的某处将 "input" 更改为 "select"。或者 javascript 中的数量或按钮未正确传输？

经过一些试验后我无法让它工作。

有人可以帮我解决这个问题吗？我会很高兴（一直在挣扎javascript）

谢谢。

输入字段（有效）的html代码是：

<input type="hidden" value="<?=$product['product_id']?>" size="2" name="product_id" />
        <input type="hidden" value="<?=$product['gift_products_id']?>" size="2" name="gift_products_id" />
        <? if($product['quantity']!==$product['total']){  ?>
        <input type="text" value="1" size="2" name="quantity" />
        <a class="btn btn-primary addtocart" lang="<?=$product['product_id']?>" href="javascript:void(0)" ><span><?=$_['gr_m_add_to_cart']?></span></a>
        <? } ?>

"select option" 字段的 html 代码，正确配置但不工作是：

<input type="hidden" value="<?=$product['product_id']?>" size="2" name="product_id" />
<input type="hidden" value="<?=$product['gift_products_id']?>" size="2" name="gift_products_id" />
<? if($product['quantity']!==$product['total']){  ?>
<select name="quantity" class="form-control_cart" id="input-quantity" value="1" >
     <?php foreach (range(1, $product['quantity'], 1) as $stap) {
          if ($stap == 1) {
                echo "<option value='$stap' selected>$stap</option>";
          } else {
                echo "<option value='$stap'>$stap</option>";
          }
        }  ?>
</select>
<a class="btn btn-default addtocart" style="margin-top:-4px" lang="<?=$product['product_id']?>" href="javascript:void(0)"  data-toggle="tooltip" title="<?=$_['gr_m_add_to_cart']?>"><i class="fa fa-shopping-cart"></i></a>                       
<? } ?>

用于添加到购物车按钮的 javascript 代码：

$('.addtocart').click(function() {
id = $(this).attr('lang');
$.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\']'),
    dataType: 'json',
    beforeSend: function() {
        //$('#button-cart').button('loading');
        $('.addtocart').button('loading');
    },
    complete: function() {
        //$('#button-cart').button('reset');
        $('.addtocart').button('reset');
    },
    success: function(json) {
        $('.alert, .text-danger').remove();
        $('.form-group').removeClass('has-error');

        if (json['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    var element = $('#input-option' + i.replace('_', '-'));

                    if (element.parent().hasClass('input-group')) {
                        element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    } else {
                        element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    }
                }
            }

            if (json['error']['recurring']) {
                $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
            }

            // Highlight any found errors
            $('.text-danger').parent().addClass('has-error');
        }

        if (json['success']) {
            if (!Journal.showNotification(json['success'], json['image'])) {
                $('.breadcrumb').after('<div class="alert alert-success success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
            }

            $('#cart-total').html(json['total']);

            $('html, body').animate({ scrollTop: 0 }, 'slow');

            $('#cart ul').load('index.php?route=common/cart/info ul li');
        }
    }
});
});

Answer 1

您应该更改这行代码：

 data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\']'),

至：

 data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\'], #row_'+id+' select'),

只需将 select 元素添加到数据中，使用任何 class 或您想要的 ID。

如何通过 select 选项数量字段正确替换数量输入字段？

How to correctly replace input field for quantity by select option quantity field?

html

javascript

php

jquery

opencart