如何从下拉数组中获取选定的值
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 一个选项时填充。
我在一个网页上展示了 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 一个选项时填充。