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

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

      }

   ]

}

产品_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。

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

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

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

那么我的问题是，我的选项数组看起来不错还是应该进一步嵌套？我是用户

Answer 1

您获得最后一个选项的原因是因为您在选择选项时没有更新它。首先，我们需要data在选项中添加属性。<select class="custom-select" id="product-price-{{$i}}-select" name="LeaveType">&nbsp; &nbsp; <option selected>Choose a frame...</option>&nbsp; &nbsp; @foreach($attributes->frame as $attribute)&nbsp; &nbsp; &nbsp; &nbsp; <option&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="{{$attribute->price}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-template-id="{{$attribute->template_id}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-name="{{$attribute->name}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-id="{{$attribute->id}}">{{$attribute->name}}</option>&nbsp; &nbsp; @endforeach</select>现在在您的.custom-select更改事件中。<script>&nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; $('.custom-select').on('change', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.custom-select').not(this).val('Choose a frame...');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var current = $(this).attr('id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var res = current.split("-select");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.' + res[0]).html($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Get the data from selected option&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var selected_option = $(this).find('option:selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var template_id = selected_option.data('template-id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var product_name = selected_option.data('name');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Now assign it to hidden input field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input[name="product_name"]').val(product_name);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input[name="sku"]').val(template_id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input[name="price"]').val($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</script>而已。这应该可以解决问题。我没有测试它。如果有问题让我知道。还有一件事。您可以从此表单中删除值，因为它会在您选择一个选项时被填充。