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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments