select "A" dropdown to fetch "B" another related dropdown

when select "A Dropdown" - Second "B Dropdown" Show Data

18

Arun Kr.
02-Mar-25

Step 1 - "A Dropdown" - 

<select required name="primary_category" class="form-control" onchange="selcat(this.value)">

Step 2 - onchange function call To Ajax

<script type="text/javascript">
	function selcat(pcat_id)
	{

		const ajaxreq = new XMLHttpRequest();
		ajaxreq.open('GET','<?=BASE_URL;?>seller/dashboard/product/add_product.php?dd=category&pcat_id='+pcat_id,'TRUE');
		ajaxreq.send();

		ajaxreq.onreadystatechange = function ()
		{
			if (ajaxreq.readyState == 4 && ajaxreq.status == 200) 
			{
				document.getElementById('sub_cat_id').innerHTML = ajaxreq.responseText;
			}
		}
	}
</script>

Step 3- Fetch From DataBase 

if (isset($_GET['dd']) && $_GET['dd'] == 'category') 
{
	
	$pcat_id = $_GET['pcat_id'];

	$Uni->orderBy('pcat_id','desc');
	$Uni->where("pcat_id", $pcat_id);
	$i= $Uni->get('scategory');

	echo '<option selected disable value="" >Select Sub Category</option>';

	foreach ($i as $key => $value)
	{

		echo '<option value="'.$value['scat_id'].'">'.$value['scat_name'].'</option>';
	} 
	exit();
}

 

Step 4 - At Last its return in on  "B Dropdown " -

	<select required name="secondary_category" id="sub_cat_id" class="form-control">
@Since 2024 Arun'Log Powered by Arun Git