Selectize example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.default.css" rel="stylesheet">

    <base href="http://example.com/">

    <title>Selectize</title>
  </head>

  <body>
    <div class="container text-center mt-4">
      <h1>Department / Designation Selection</h1>
    </div>

    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8">
          <label for="department">Departments:</label>
          <select id="department" placeholder="Choose a Department..."></select>

          <label for="designation">Designations:</label>
          <select id="designation" placeholder="Choose a Designation..."></select>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>

    <script>
      $(function (){
        var xhr;
        var select_department, $select_department;
        var select_designation, $select_designation;

        $select_department = $('#department').selectize({
          valueField: 'id',
          labelField: 'name',
          searchField: 'name',
          create: false,
          preload: true,

          load: function(query, callback) {
            console.log('load');
            this.settings.load = null;  // prevent selectize from loading when typing

            $.ajax({
              url: 'departments',  // uses document base URL
              type: 'GET',
              dataType: 'JSON',

              success: function(results) {
                console.log(results);
                $select_department.options = results;
                callback(results);
              },

              error: function(err) {
                console.log(err);
                callback();
              }
            });
          },

          onChange: function(value) {
            console.log('onChange' + value);
            if (!value.length) return;

            select_designation.disable();
            select_designation.clearOptions();
            select_designation.load(function(callback) {
              xhr && xhr.abort();
              xhr = $.ajax({
                url: 'designations?department=' + value,  // uses document base URL
                type: 'GET',
                dataType: 'JSON',

                success: function(results) {
                  console.log(results);
                  select_designation.enable();
                  callback(results);
                },

                error: function(err) {
                  console.log(err);
                  callback();
                }
              });
            });
          }
        });


        $select_designation = $('#designation').selectize({
          valueField: 'name',
          labelField: 'name',
          searchField: ['name']
        });


        select_department = $select_department[0].selectize;
        select_designation = $select_designation[0].selectize;

        select_designation.disable();
      });
    </script>
  </body>
</html>