تمرین جلسه 81 - فرانت انتخاب دسته بندی ها به صورت آبشاری

سلام خدمت استاد عزیز و همه دوستان 

بنده فرانت این بخش را به این صورت و با استفاده از jquery  پیاده سازی کرده ام.

امیدوارم براتون مفید بوده باشه و در صورتی که باگی داشت ممنون میشم اطلاع رسانی کنید. 

کد html :

<div class="row m-5">
	<div class="col-md-4">
		<div class="form-group">
			<label class="form-label mb-0">دسته بندی اصلی</label>
			<select class="form-control" id="main-category">
				<option value="">لطفا انتخاب کنید</option>
			</select>
		</div>
	</div>

	<div class="col-md-4">
		<div class="form-group">
			<label class="form-label mb-0">دسته بندی فرعی</label>
			<select class="form-control" id="sub-category">
				<option value="">لطفا انتخاب کنید</option>
			</select>
		</div>
	</div>

	<div class="col-md-4">
		<div class="form-group">
			<label asp-for="CategoryId" class="form-label mb-0">دسته بندی نهایی</label>
			<select asp-for="CategoryId" class="form-control">
				<option value="">لطفا انتخاب کنید</option>
			</select>
		</div>
	</div>
</div>

کد js:

@* Select Categories Ajax *@

<script>
	var ajaxTo = '@Url.Action(action: "GetCategories", controller: "Categories", new { area = "Admin"})';
	function loadCategoriesAsync(targetSelect,parentId){
		targetSelect.empty()
		.append('<option value="">لطفا انتخاب کنید</option>');
		$.ajax({
			url:ajaxTo,
			type: 'GET',
			dataType: 'json',
			data:{
				parentId:parentId
			},
			success: function (data) {
					if (data &amp;amp;&amp;amp; data.length > 0) {
						$.each(data, function (index, item) {
							targetSelect.append(
							'<option value="' + item.id + '">' +
								item.title +
							'</option>'
							);
						});
								}
					}
			,error: function (error) {
				console.error("خطا در دریافت اطلاعات:", error);
				alert('خطایی در ارتباط با سرور رخ داد.');
				}
		});
	}
</script>



<script>
	$(document).ready(function(){
		var mainSelect = $('#main-category');
		loadCategoriesAsync(mainSelect);

		$('#main-category').on('change',function(){
			$('#sub-category').empty()
			.append('<option value="">لطفا انتخاب کنید</option>');

			$('#CategoryId').empty()
			.append('<option value="">لطفا انتخاب کنید</option>');

			var parentId = $(this).val();
			if(!parentId){
				return;
			}
			else{
				var subSelect = $('#sub-category');
				loadCategoriesAsync(subSelect,parentId);
			}
		});

		$('#sub-category').on('change',function(){
			$('#CategoryId').empty()
			.append('<option value="">لطفا انتخاب کنید</option>');
			var parentId = $(this).val();
			if(!parentId){
				return;
			}
			else{
				var finalSelect = $('#CategoryId');
				loadCategoriesAsync(finalSelect,parentId);
			}
		});

			})

</script>

🌷🌷  با تشکر