Dynamic Multiple Dropdown list with append method not working

Dynamic Multiple Dropdown list with append method not working

Hi guys,
my problem is that in browser my dynamic multiple drop down select list not showing at all !!
i m using append method like that.

i have two drop down, when click on item in first drop down, in show data to secound dro pdown (is multiple), but in secound dropdown don show data, but data loaded in HTML (when insept dropdown with chrome).

first dropdown :
first dropdown

secound drop down (multiple) :


and insept dropdown :



and my jquery code :

  1. var populate_models;
  2.     $(document).ready(function () {
  3.         populate_models = function () {
  4.             var brand_id = $('#brands').val();
  5.             var address = '{{route('home.get_brands')}}' + '/' + brand_id;
  6.             $.getJSON(address, function (data) {
  7.                 //console.log(data);
  8.                 var models_dropdown = $("#models");
  9.                 models_dropdown.empty();
  10.                 
  11.                 var all_models = $("<option />");
  12.                 all_models.html("نام");
  13.                 all_models.val("all");
  14.                 models_dropdown.append(all_models);

  15.                 $(data['models']).each(function () {
  16.                     var option = $("<option />");
  17.                     option.html(this.cat_name);
  18.                     option.val(this.id);
  19.                     models_dropdown.append(option);
  20.                 });

  21.             });
  22.         }
  23.     });