Question

我在网页上显示3种产品，每种产品都有其下拉选择选项。我还为每种产品指定了自己的形式。

我拥有的产品选项对于每种产品都是唯一的。

Product_1选项

{
   "frame":[
      {
         "template_id":"SKU-26x16-SQUARE",
         "name":"Square Canvas - Small",
         "price":"100",
      },
      {
         "id":3,
         "template_id":"SKU-28x28-SQUARE",
         "name":"Square Canvas - Medium",
         "price":"300",

      },
      {
         "id":3,
         "template_id":"SKU-32x32-SQUARE",
         "name":"Square Canvas - Large",
         "price":"500",
      }
   ]
}

Product_2选项

{
   "frame":[
      {
         "id":1,
         "template_id":"SKU-16x12-PORTRAIT",
         "name":"Small Portrait Mounted",
         "price":"100",
      },
      {
         "id":2,
         "template_id":"SKU-16x20-PORTRAIT",
         "name":"Medium Portrait Mounted",
         "price":"300",
      },
      {
         "id":3,
         "template_id":"SKU-24x36-PORTRAIT",
         "name":"Large Portrait Mounted",
         "price":"500",
      }
   ]
}

Product_3个选项

{
   "frame":[
      {
         "id":1,
         "template_id":"SKU-11x14-PORTRAIT",
         "name":"Small Portrait",
         "price":"100",
      },
      {
         "id":2,
         "template_id":"SKU-16x20-PORTRAIT",
         "name":"Medium Portrait",
         "price":"300",
      },
      {
         "id":3,
         "template_id":"SKU-24x32-PORTRAIT",
         "name":"Large Portrait",
         "price":"500",
      }
   ]
}

现在，无论我从下拉菜单中选择哪个选项，问题都只是我的表单似乎只发布列表中的最后一个选项。例如，product_1 "name":"Small Portrait"我需要我的表单来发布数组id:1中包含的所有项目，但它只会发布最后一个数组id:3的值。 / p>

下拉选择包含每个产品的属性：

<select class="custom-select" id="product-price-{{$i}}-select" name="LeaveType">
    <option selected>Choose a frame...</option>
    @foreach($attributes->frame as $attribute)
        <option
            value="{{$attribute->price}}">{{$attribute->name}}</option>
    @endforeach
</select>

以下是根据所选值更新dom的jQuery：

   <script>
        $(document).ready(function () {
            $('.custom-select').on('change', function () {
                $('.custom-select').not(this).val('Choose a frame...');
                var current = $(this).attr('id');
                var res = current.split("-select");
                $('.' + res[0]).html($(this).val());
            });
        });
    </script>

这里的表格再也不花哨了，

  <form id="form" action="/" method="POST">
        <input type="hidden" name="product_name" value="{{ $attribute->name  ?? '' }}">
        <input type="hidden" name="sku" value="{{$attribute->template_id ?? ''}}">
        <input type="hidden" name="price" value="{{$attribute->price}}">
        <button id="submit" class="btn btn-success">{{__('Add to cart')}}</button>
    </form>

这是POST请求的转储，尽管我选择了FORM发布最后一个的第一个选项：

array (
  'product_name' => 'Square Canvas - Large',
  'sku' => 'SKU-32x32-SQUARE',
  'price' => '500',
  'size' => '71.49 x 71.49cm',
)

以前有人遇到过此问题，并且知道解决此问题的方法吗？我以为我的阵列错了，但是请一些建议。

那么我的问题是，我的一系列选项看起来还可以，还是应该进一步嵌套？我是用户

Answer 1

之所以获得最后一个选项，是因为您在选择一个选项时没有更新它。

首先，我们需要在选项中添加data属性。

<select class="custom-select" id="product-price-{{$i}}-select" name="LeaveType">
    <option selected>Choose a frame...</option>
    @foreach($attributes->frame as $attribute)
        <option
            value="{{$attribute->price}}"
            data-template-id="{{$attribute->template_id}}"
            data-name="{{$attribute->name}}"
            data-id="{{$attribute->id}}">{{$attribute->name}}</option>
    @endforeach
</select>

现在进入您的.custom-select更改事件。

<script>
    $(document).ready(function () {
        $('.custom-select').on('change', function () {
            $('.custom-select').not(this).val('Choose a frame...');
            var current = $(this).attr('id');
            var res = current.split("-select");
            $('.' + res[0]).html($(this).val());

            // Get the data from selected option
            var selected_option = $(this).find('option:selected');
            var template_id = selected_option.data('template-id');
            var product_name = selected_option.data('name');

            // Now assign it to hidden input field
            $('input[name="product_name"]').val(product_name);
            $('input[name="sku"]').val(template_id);
            $('input[name="price"]').val($(this).val());
        });
    });
</script>

就是这样。这应该可以解决问题。我没有测试。如果有问题，请告诉我。

还有一件事。您可以从此表单中删除值，因为选择一个选项时就会填充它。

如何从下拉列表中获取选定的值

1 个答案: