我尝试通过 4 个下拉菜单创建搜索功能，它们加载数据的先前下拉选定项目的基础。
逻辑
字段 = 下拉选项
字段 1 选择A
字段 2 选项B C（选择B）
字段 3 选项D E（选择E）
字段 4 选项F G（选择F）=> 结果。
问题
- 当我到达字段 2 时，它发送
2id 而不是一个（这是选定的项目 id），它将计为字段 3 id，所以我失去了选择字段 3 的能力。 - 我无法获得字段 4 的结果。
截图
database logic
front-end logic & issue
代码
field one data
$findercategories = FinderYmmValue::where('parent_id', null)->get();
field 2 data, base on field one selected item
public function getSubCategories($id){
$finderdropdownvalues = FinderYmmValue::where('parent_id', $id)->get();
return response()->json($finderdropdownvalues);
}
field 3 data, base on field two selected item
public function getspecifications($id){
$fdhgkhehg = FinderYmmValue::where('parent_id', $id)->get();
return response()->json($fdhgkhehg);
}
field 4 data, base on field three selected item
public function getbrands($id){
// $fdhgkhehg = FinderMap::where('', $id)->get();
// return response()->json($fdhgkhehg);
$skus = DB::table('finder_maps')
->where('ymm_value_id', $id)
->join('finder_ymm_values', 'finder_ymm_values.id', '=', 'finder_maps.ymm_value_id')
->groupBy('ymm_value_id')
->get();
return response()->json($skus);
}
JavaScript 代码
<!-- get field 2 items -->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="category_id"]').on('change', function() {
var categoryID = $(this).val();
if(categoryID) {
$.ajax({
url: '{{ url('getSubCategories') }}/'+encodeURI(categoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>");
$.each(data, function(key, value) {
$('select[name="subcategory_id"]').append('<option value="'+ value['id'] +'">'+ value['title'] +'</option>');
});
}
});
}else{
$('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
<!-- get field 3 items-->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="subcategory_id"]').on('change', function() {
var subcategoryID = $(this).val();
if(subcategoryID) {
$.ajax({
url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="specification_id"]').empty().append("<option value='' selected>Select</option>");
$.each(data, function(key, value) {
$('select[name="specification_id"]').append(
"<option class='form-control' value='"+ value['id'] +"'>"+ value['title'] +"</option>");
});
}
});
}else{
$('select[name="specification_id"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
<!-- get field 4 items-->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="subcategory_id"]').on('change', function() {
var subcategoryID = $(this).val();
if(subcategoryID) {
$.ajax({
url: '{{ url('getbrands') }}/'+encodeURI(subcategoryID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="brand_id"]').empty().append("<option value='' selected>Select</option>");
$.each(data, function(key, value) {
$('select[name="brand_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['sku'] +'</option>');
});
}
});
}else{
$('select[name="brand_id"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
问题
- 为什么选择第二个字段项时会发送 2 个 id？
- 为什么我在选择字段 3 时无法发送它？
任何想法？