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

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

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

而已。这应该可以解决问题。我没有测试它。如果有问题让我知道。

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