select2 with dependent dynamic dropdown PHP/JQuery - php

Question

hi i'm using select2 to style my dependent dynamic dropdown list on my php file, the problem is when i select a value from 1st dropdown to fetch data from mysql DB to 2nd dropdown list it goes to it's default style so i need some solution to solve the problem here is my files.
select2 script:
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
index.php:`
<form name="form1" action="test.php" method="post">
<table>
<tr>
<td>
<select name="brand" id="branddd" class="js-example-basic-single" required>
<option disabled selected required >brand</option>
<?php
$res=mysqli_query($link,"select * from brand");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>
<select name="model" id="model" class="js-example-basic-single" required>
<option disabled selected required >model</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
script to fetch DB values:
<script type="text/javascript">
function change_brand()
{
var xmlhttp=new XMLHttpRequest () ;
xmlhttp.open("GET","ajax.php?brand="+document.getElementById("branddd").value,false) ;
xmlhttp.send(null) ;
document.getElementById("model").innerHTML=xmlhttp.responseText ;
}
$(function(){
$('#branddd').on('change',function(){
this.value && // if value!="" then call ajax
$.get('ajax.php',{brand:this.value},function(response){
$('select[name="model"]').html(response);
});
});
});
</script>
ajax.php:
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link,"test_db");
$brand=$_GET["brand"];
if($brand!="")
{
$res=mysqli_query($link,"select * from model where brand_id=$brand");
echo "<select>";
while($row=mysqli_fetch_array($res))
{
echo "<option>"; echo $row["name"]; echo "</option>";
}
echo "</select>";
}
?>

Answer 1

This is your styled select element:
<select name="model" id="model" class="js-example-basic-single" required>
You need to add the name, id, and class attributes to your PHP echo. Something like this:
echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>";
But a much better way would be to not write out a new select element and replace it with the html function. Instead, output the data from your PHP page as a JSON object, then add those options to the select element.
JSON object:
{
"option1": "Data A",
"option2": "Data B",
"option3": "Data C"
}
JavaScript:
function change_brand() {
$.ajax({
url: "ajax.php?brand="+document.getElementById("branddd").value,
dataType: "json",
success: function(data) {
var name, select, option;
select = document.getElementById('model');
// Clear the old options
select.options.length = 0;
// Load the new options
for (name in data) {
if (data.hasOwnProperty(name)) {
select.options.add(new Option(data[name], name));
}
}
}
});
}