Dynamic generate form based on select box change value - php

Question

I want to generate dynamic form based on select box change value.
Suppose i have a parent select box :
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
below select box is depend on first
<select name="select2" id="select2">
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Here is my 2 select boxes and i want 2 things
1) create dependency of 2 this select box
2 ) I want to generate a dynamic form based on change second select box value.
for example if i select apple then a form open with related apple value.
I am a new in jquery and i do not have any idea about it ( share me code script if any one knows)

Answer 1

You can follow this way to making a dynamic dropdown.
The following HTML code contains dependent dropdowns for countries and states. Country options are read from the database and shown in the dropdown on page load. Initially, the state dropdown has no options. On changing the country dropdown values, a jQuery function is called to get dependent state options and loaded dynamically.
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
<option value="">Select State</option>
</select>
</div>
</div>
The following jQuery script shows a function to send an AJAX request to PHP to read state list depends on the selected country. This AJAX call is set with the selected country id.
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
}
});
}
</script>
In PHP, it connects the database to retrieve “states” table values based on the country id passed by jQuery AJAX call. It forms state dropdown options and returns as the AJAX response. This response is inserted to the state dropdown.
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query);
?>
<option value="">Select State</option>
<?php
foreach($results as $state) {
?>
<option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option>
<?php
}
}
?>