如何从下拉数组中获取选定的值

How do I get the selected values from my dropdown array

我在一个网页上展示了 3 个产品,每个产品都有自己的下拉 select 选项。我还为每种产品提供了自己的形式。

我拥有的产品选项对于每个产品都是独一无二的。

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",
      }
   ]
}

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

下拉菜单 select 包含每个产品的属性:

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

这是根据 selected 值更新 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',
)

有没有人以前遇到过这个问题并且知道解决方法?我在想我的数组是错误的,但希望得到一些建议。

那么我的问题是,我的选项数组看起来没问题还是应该进一步嵌套?我是用户

你得到最后一个选项的原因是你在select一个选项时没有更新它。

首先,我们需要在选项中添加 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>

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

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