我有一个表单，我想根据所选的sububcategory_id隐藏它的特定部分，但我似乎无法使其工作。
我有一个脚本，它根据所选类别更改子类别，另一个脚本根据所选子类别更改子分类。
用于隐藏表单部分的脚本有效，但仅适用于来自DB的类别，而不适用于受第一个脚本影响的子类别。select中的option元素的值似乎在第二个脚本中注册为空。我该怎么修？
<script type="text/javascript">
$(document).ready(function() {
$('select[name="category_id"]').on('change', function() {
var category_id = $(this).val();
if (category_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory') }}/" + category_id,
type: "GET",
dataType: "json",
success: function(data) {
$('select[name="subsubcategory_id"]').html('');
var d = $('select[name="subcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subcategory_name + '</option>');
});
},
});
} else {
alert('danger');
}
});
$('select[name="subcategory_id"]').on('change', function() {
var subcategory_id = $(this).val();
if (subcategory_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory/product') }}/" +
subcategory_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="subsubcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subsubcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subsubcategory_name + '</option>');
});
},
});
} else {
alert('danger');
}
});
});
</script>
// script to hide parts of the form
<script>
$(document).ready(function() {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
$("#test").change(function() {
var subsubcategory_id = $(this).val();
if (subsubcategory_id == 1) {
$('#fieldLaptop').show();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
} else if (subsubcategory_id == 2) {
$('#fieldLaptop').hide();
$('#fieldTablet').show();
$('#fieldPhone').hide();
} else if (subsubcategory_id == 3) {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').show();
} else {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
}
});
});
$("#test").trigger("change");
</script>
<form method="post" action="{{ route('product-store') }}" enctype="multipart/form-data">
@csrf
<div class="row mbn-20">
<div class="col-3 mb-20">
<label for="formLayoutUsername3">Brand</label>
<select name="brand_id" class="form-control">
<option value="" selected="" disabled="">Brand</option>
<option value="{{ $brand->id }}">
{{ $brand->brand_name }}
</option>
@endforeach
</select>
@error('brand_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
@enderror
</select>
</div>
<div class="col-3 mb-20">
<label for="formLayoutEmail3">Categorie</label>
<select name="category_id" class="form-control">
<option value="" selected="" disabled="">Category
</option>
<option value="{{ $category->id }}">
{{ $category->category_name }}
</option>
@endforeach
</select>
@error('category_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
@enderror
</div>
<div class="col-3 mb-20">
<label for="formLayoutPassword3">SubCategory</label>
<select name="subcategory_id" class="form-control">
<option value="" selected="" disabled="">Select SubCategory
</option>
</select>
@error('subcategory_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
@enderror
</div>
<div class="col-3 mb-20">
<label for="formLayoutAddress1">SubSubCategory</label>
<select name="subsubcategory_id" class="form-control" id="test">
<option value="" selected="" disabled="">Select SubSubCategory
</option>
</select>
@error('subsubcategory_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
@enderror
</div>
</form>
根据您的解释，我认为您正在寻找以下内容：
$(document).on('change', '[data-child]', function() {
const selected_group = $(this).val();
let el = $(`#${$(this).attr("id")}`);
if (selected_group === null) {
el.hide();
} else {
el.show();
}
let child_select = $("#" + $(this).attr("data-child"));
value = child_select.find("option").hide().filter(function(i, e) {
return $(e).val().startsWith(selected_group);
}).show().eq(0).val();
child_select.val(value);
child_select.trigger("change");
});
$("[data-child]").eq(0).trigger("change");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row m-4 justify-content-center">
<div class="col-3">
<span>Operating system</span>
<select data-child="niv1" class="selectdata form-control custom-select">
<option value="1-1">Android</option>
<option value="1-2">Linux</option>
<option value="1-3" selected>Windows</option>
</select>
</div>
<div class="col-3">
<span>System version</span>
<select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
<option data-group="1-1" value="1-1-1">9.0 Pie</option>
<option data-group="1-2" value="1-2-1">Ubuntu</option>
<option data-group="1-3" value="1-3-1">Windows 7</option>
<option data-group="1-3" value="1-3-2">Windows 8</option>
<option data-group="1-3" value="1-3-3">Windows 10</option>
</select>
</div>
<div class="col-3">
<span>Edition</span>
<select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
<option data-group="1-2-1" value="1-2-1-1">Trusty Tahr</option>
<option data-group="1-2-1" value="1-2-1-2">Xenial Xerus</option>
<option data-group="1-2-1" value="1-2-1-3">Bionic Beaver</option>
<option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
<option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>
<option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
<option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>
<option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
<option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
</select>
</div>
<div class="col-3">
<span>Build</span>
<select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
<option data-group="1-2-1-2" value="1-2-1-2-1">18.04 LTS</option>
<option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
<option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>
<option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
<option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>
<option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
<option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>
<option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
<option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>
<option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
<option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>
<option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
<option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
</select>
</div>
</div>所以这就是让它工作的方法。如果只有一个选项，你可能应该在放入东西后手动触发它，这样它就可以用第一个选择的选项运行
只有当用户更改时才会调用更改，而不是在AJAX运行之后。因此，在您的情况下，您可能总是想调用change，以确保您的UI与最初来自服务器的同步
$('select[name="subcategory_id"]').on('change', function() {
var subcategory_id = $(this).val();
if (subcategory_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory/product') }}/" +
subcategory_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="subsubcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subsubcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subsubcategory_name + '</option>');
});
// the tigger is set here for one option in the select !!!
$("#test").trigger("change");
},
});
} else {
alert('danger');
}
});