<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <!-- Bootstrap CSS -->

	

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />

	

	<!-- Bootstrap Bundle with Popper -->

	

    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>

	

	<!-- jQuery library -->

	

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>



    <title>Dynamic Dependent Select Box PHP OOP Ajax : Onlyxcodes</title>

	

  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #3f51b5;">

	  <div class="container-fluid">

		<a class="navbar-brand" href="https://www.onlyxcodes.com/">Onlyxcodes</a>

		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

		  <span class="navbar-toggler-icon"></span>

		</button>

		<div class="collapse navbar-collapse" id="navbarSupportedContent">

		  <ul class="navbar-nav me-auto mb-2 mb-lg-0">

			<li class="nav-item">

			  <a class="nav-link active" aria-current="page" href="https://www.onlyxcodes.com/2021/07/dynamic-dependent-select-box-php-oop-ajax.html">Back to Tutorial</a>

			</li>

		  </ul>

		</div>

	  </div>

	</nav>

	

    <div class="container">

        <div class="row">        

			<div class="col-md-12 mt-5">

			<?php

			

			include 'dropdown.php';

			

			$obj = new Dropdown();

			

			$rows = $obj->fetchCountry();

			

			?>

			<label class="form-label" style="font-size:20px; font-style:bold;">Select Article Type</label>

			<select id="articletype_change" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">

				<option>-- select Article Type --</option>

			  <?php

				if(!empty($rows))

				{

					foreach($rows as $row)

					{

					?>

						<option value="<?php echo $row['idarticletype']; ?>"><?php echo $row['name_articletype']; ?></option>	

					<?php

					}

				}

			  ?>

			  

			</select>



			<label class="form-label" style="font-size:20px; font-style:bold;">Select Model</label>

			<select id="model_change" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">

			  <option>-- select Model --</option>

			</select>

	

			<label class="form-label" style="font-size:20px; font-style:bold;">Select Characteristic</label>

			<select id="charact_result" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">

			  <option>-- select Characteristic --</option>

			</select>



            </div>

        </div>

    </div>



  </body>

</html>



<script>

// country dependent ajax

 $(document).on("change","#articletype_change", function(e){

	e.preventDefault();

		

	var articletype = $("#articletype_change").val();	

		

	$.ajax({

        type: "POST",

        url: "modelart.php",

		dataType: "json",

        data: "idarticletype="+articletype,

        success: function(response)

        {

			var modelBody = "";

			modelBody = "<option>-- select Model --</option>"

			for(var key in response)

			{

				modelBody += "<option value="+ response[key]['idmodelarticle'] +">"+ response[key]['namemodelarticle'] +"</option>";

				$("#model_change").html(modelBody);

			}		

        }

    });

 });



// state dependent ajax

 $(document).on("change","#articletype_change", function(e){

	e.preventDefault();

		

	var charact = $("#articletype_change").val();	

		

	$.ajax({

        type: "POST",

        url: "articlecharact.php",

		dataType: "json",

        data: "idarticletype="+charact,

        success: function(response)

		

		{

			var charactBody = "";

			charactBody = "<option>-- select Characteristic --</option>"

			for(var key in response)

			{

				charactBody += "<option value="+ response[key]['idarticlecharacteristic'] +">"+ response[key]['name_articlecharacteristic'] +"</option>";

				$("#charact_result").html(charactBody);

			}		

        }

		

        

    });

 });	

</script>