select2 with dependent dynamic dropdown PHP/JQuery

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));
       }
     }
   }
  });
}