How to reuse function in different files?

Question

I'm using this function already in 5 different files for different ID fields. And when I fill it with more data, will be a lot of same code in my pages. Is there any way just to call that specific items array from another file? I'm new to JavaScript and jQuery.

var items = [{
  name: '-Моля,изберете-',
  value: '',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }]
}, {
  name: 'BMW',
  value: 'bmw',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: '320',
    value: '320'
  }, {
    name: '330',
    value: '330'
  }]
}, {
  name: 'Toyota',
  value: 'toyota',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: 'MR2',
    value: 'mr2'
  }, {
    name: 'Capry',
    value: 'capry'
  }]
}];


jQuery(document).ready(function($) {

  var temp = {};
  $.each(items, function() {
    $("<option />")
      .attr("value", this.value)
      .html(this.name)
      .appendTo("#adm_car_make");

    temp[this.value] = this.subitems;
  });

  $("#adm_car_make").change(function() {
    var value = $(this).val(),
      menu = $("#adm_car_model");

    menu.empty();

    $.each(temp[value], function() {
      $("<option />")
        .attr("value", this.value)
        .html(this.name)
        .appendTo(menu);
    });

  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="adm_car_make"></select>
<select id="adm_car_model">
  <select>

Answer 1

You can actually split almost all functionality out to a separate file which takes 2 arguments (makeField and modelField) as a function to markup your pages.

// Start of first file declare the function and the data once.
var myCars = [{
    name: '-Моля,изберете-',
    value: '',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }]
}, {
    name: 'BMW',
    value: 'bmw',
    subitems: [{
        name: '-Моля,изберете-',
        value: ''
    }, {
        name: '320',
        value: '320'
    }, {
        name: '330',
        value: '330'
    }]
}, {
    name: 'Toyota',
    value: 'toyota',
    subitems: [{
        name: 'MR2',
        value: 'mr2'
    }, {
        name: 'Capry',
        value: 'capry'
    }]
}];


jQuery(document).ready(function ($) {
    // Make a reusable function
    window.makeCarsDropdown = function (makeField, modelField) {
        var temp = {};
        $.each(myCars, function () {
            $("<option />")
                .attr("value", this.value)
                .html(this.name)
                .appendTo(makeField);

            temp[this.value] = this.subitems;
        });

        $(makeField).change(function () {
            var value = $(this).val(),
                menu = $(modelField);

            menu.empty();

            $.each(temp[value], function () {
                $("<option />")
                    .attr("value", this.value)
                    .html(this.name)
                    .appendTo(menu);
            });

        }).change();
    }
});
/* End of first file */

Then you can call the makeCarsDropdown function anywhere after you have included the above file, passing it two selectors

// Call the function from anywhere e.g.
jQuery(document).ready(function ($) {
    makeCarsDropdown("#adm_car_make", "#adm_car_model");
});

Working snippet:

// Start of first file declare the function and the data once.
var myCars = [{
  name: '-Моля,изберете-',
  value: '',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }]
}, {
  name: 'BMW',
  value: 'bmw',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: '320',
    value: '320'
  }, {
    name: '330',
    value: '330'
  }]
}, {
  name: 'Toyota',
  value: 'toyota',
  subitems: [{
    name: '-Моля,изберете-',
    value: ''
  }, {
    name: 'MR2',
    value: 'mr2'
  }, {
    name: 'Capry',
    value: 'capry'
  }]
}];


jQuery(document).ready(function($) {
  // Make a reusable function
  window.makeCarsDropdown = function(makeField, modelField) {
    var temp = {};
    $.each(myCars, function() {
      $("<option />")
        .attr("value", this.value)
        .html(this.name)
        .appendTo(makeField);

      temp[this.value] = this.subitems;
    });

    $(makeField).change(function() {
      var value = $(this).val(),
        menu = $(modelField);

      menu.empty();

      $.each(temp[value], function() {
        $("<option />")
          .attr("value", this.value)
          .html(this.name)
          .appendTo(menu);
      });

    }).change();
  }
});
/* End of first file */

jQuery(document).ready(function($) {
  makeCarsDropdown("#adm_car_make", "#adm_car_model");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="adm_car_make"></select>
<select id="adm_car_model"></select>