diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.vue
index 09328435..f9219b27 100644
--- a/src/fields/core/fieldSelect.vue
+++ b/src/fields/core/fieldSelect.vue
@@ -1,11 +1,16 @@
 <template lang="pug">
 	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
 		option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
-		option(v-for="item in items", :value="getItemValue(item)") {{ getItemName(item) }}
+
+		template(v-for="item in items")
+			optgroup(v-if="item.group", :label="getGroupName(item)")
+				option(v-if="item.ops", v-for="i in item.ops", :value="getItemValue(i)") {{ getItemName(i) }}
+
+			option(v-if="!item.group", :value="getItemValue(item)") {{ getItemName(item) }}
 </template>
 
 <script>
-	import {isObject} from "lodash";
+	import {isObject, find} from "lodash";
 	import abstractField from "../abstractField";
 	
 	export default {
@@ -19,13 +24,74 @@
 			items() {
 				let values = this.schema.values;
 				if (typeof(values) == "function") {
-					return values.apply(this, [this.model, this.schema]);
+					return this.groupValues(values.apply(this, [this.model, this.schema]));
 				} else
-					return values;
-			}      
+					return this.groupValues(values);
+			}
 		},
 
 		methods: {
+
+			groupValues(values){
+				let array = [];
+				let arrayElement = {};
+
+				values.forEach((item) => {
+
+					arrayElement = null;
+
+					if(item.group && isObject(item)){
+					// There is in a group.
+						
+						// Find element with this group.
+						arrayElement = find(array, i => i.group == item.group);
+
+						if(arrayElement){
+							// There is such a group.
+
+							arrayElement.ops.push({
+								id: item.id,
+								name: item.name
+							});
+						}else{
+							// There is not such a group.
+							
+							// Initialising.
+							arrayElement = {
+								group:"",
+								ops:[]
+							};
+
+							// Set group.
+							arrayElement.group = item.group;
+
+							// Set Group element.
+							arrayElement.ops.push({
+								id: item.id,
+								name: item.name
+							});
+
+							// Add array.
+							array.push(arrayElement);
+						}
+					}else{
+						// There is not in a group.
+						array.push(item);
+					}
+				});
+
+				// With Groups.
+				return array;
+			},
+
+			getGroupName(item){
+				if(item && item.group){
+					return item.group;
+				}
+
+				throw "Group name is missing! https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items";
+			},
+
 			getItemValue(item) {
 				if (isObject(item)){
 					if (typeof this.schema["selectOptions"] !== "undefined" && typeof this.schema["selectOptions"]["value"] !== "undefined") {
diff --git a/test/unit/specs/fields/fieldSelect.spec.js b/test/unit/specs/fields/fieldSelect.spec.js
index 2755dc81..b0eabdb1 100644
--- a/test/unit/specs/fields/fieldSelect.spec.js
+++ b/test/unit/specs/fields/fieldSelect.spec.js
@@ -9,11 +9,11 @@ Vue.component("FieldSelect", FieldSelect);
 let el, vm, field;
 
 function createField(test, schema = {}, model = null, disabled = false, options) {
-	[ el, vm, field ] = createVueField(test, "fieldSelect", schema, model, disabled, options);
+	[el, vm, field] = createVueField(test, "fieldSelect", schema, model, disabled, options);
 }
 
 
-describe("fieldSelect.vue", function() {
+describe("fieldSelect.vue", function () {
 
 	describe("check template", () => {
 		let schema = {
@@ -31,7 +31,7 @@ describe("fieldSelect.vue", function() {
 		let model = { city: "Paris" };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, schema, model, false);
 			input = el.getElementsByTagName("select")[0];
 		});
@@ -60,7 +60,7 @@ describe("fieldSelect.vue", function() {
 		});
 
 		it("should contain the value", (done) => {
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("Paris");
 				done();
 			});
@@ -69,8 +69,8 @@ describe("fieldSelect.vue", function() {
 		describe("check optional attribute", () => {
 			let attributes = ["disabled", "inputName"];
 
-			attributes.forEach(function(name) {
-				it("should set " + name, function(done) {
+			attributes.forEach(function (name) {
+				it("should set " + name, function (done) {
 					checkAttribute(name, vm, input, field, schema, done);
 				});
 			});
@@ -78,7 +78,7 @@ describe("fieldSelect.vue", function() {
 
 		it("input value should be the model value after changed", (done) => {
 			model.city = "Rome";
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("Rome");
 				done();
 			});
@@ -89,7 +89,7 @@ describe("fieldSelect.vue", function() {
 			input.value = "London";
 			trigger(input, "change");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city).to.be.equal("London");
 				done();
 			});
@@ -98,7 +98,7 @@ describe("fieldSelect.vue", function() {
 
 		it("should contain a disabled <non selected> element if required", (done) => {
 			schema.required = true;
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				let options = input.querySelectorAll("option");
 				expect(options[0].disabled).to.be.true;
 				expect(options[0].textContent).to.be.equal("<Nothing selected>");
@@ -110,7 +110,7 @@ describe("fieldSelect.vue", function() {
 			Vue.set(vm.schema, "selectOptions", {
 				noneSelectedText: "Empty list"
 			});
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				let options = input.querySelectorAll("option");
 				expect(options[0].disabled).to.be.true;
 				expect(options[0].textContent).to.be.equal("Empty list");
@@ -126,7 +126,7 @@ describe("fieldSelect.vue", function() {
 				noneSelectedText: "Empty list",
 				hideNoneSelectedText: true
 			});
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				let options = input.querySelectorAll("option");
 				expect(options[0].disabled).to.be.false;
 				expect(options[0].textContent).to.not.be.equal("Empty list");
@@ -148,20 +148,22 @@ describe("fieldSelect.vue", function() {
 				{ id: 1, name: "London" },
 				{ id: 2, name: "Paris" },
 				{ id: 3, name: "Rome" },
-				{ id: 4, name: "Berlin" }
+				{ id: 4, name: "Berlin" },
+				{ id: 5, name: "Budapest", group: "HUN" },
+				{ id: 6, name: "Paks", group: "HUN" },
 			]
 		};
 		let model = { city: 2 };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, schema, model, false);
 			input = el.getElementsByTagName("select")[0];
 		});
 
 		it("should contain option elements", () => {
 			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
+			expect(options.length).to.be.equal(6 + 1); // +1 for <non selected>
 
 			expect(options[2].value).to.be.equal("2");
 			expect(options[2].textContent).to.be.equal("Paris");
@@ -169,8 +171,26 @@ describe("fieldSelect.vue", function() {
 			expect(options[1].selected).to.be.false;
 		});
 
+		it("should contain optgroup elements", () => {
+			let optgroups = input.querySelectorAll("optgroup");
+			expect(optgroups.length).to.be.equal(1);
+			expect(optgroups[0].label).to.be.equal("HUN");
+		});
+
+		it("should contain option elements in optgroup", () => {
+			let og = input.getElementsByTagName("optgroup")[0];
+			let options = og.querySelectorAll("option");
+
+			expect(options.length).to.be.equal(2);
+			expect(options[0].selected).to.be.false;
+			expect(options[1].selected).to.be.false;
+
+			expect(options[1].textContent).to.be.equal("Paks");
+			expect(options[1].value).to.be.equal("6");
+		});
+
 		it("should contain the value", (done) => {
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("2");
 				done();
 			});
@@ -178,7 +198,7 @@ describe("fieldSelect.vue", function() {
 
 		it("input value should be the model value after changed", (done) => {
 			model.city = 3;
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("3");
 				done();
 			});
@@ -189,7 +209,7 @@ describe("fieldSelect.vue", function() {
 			input.value = "4";
 			trigger(input, "change");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city).to.be.equal(4);
 				done();
 			});
@@ -215,13 +235,13 @@ describe("fieldSelect.vue", function() {
 		let model = { city: 2 };
 		let input;
 
-		before( () => {
+		before(() => {
 			createField(this, schema, model, false);
 			input = el.getElementsByTagName("select")[0];
 		});
 
 		it("should contain the value", (done) => {
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("2");
 				done();
 			});
@@ -229,7 +249,7 @@ describe("fieldSelect.vue", function() {
 
 		it("input value should be the model value after changed", (done) => {
 			model.city = 3;
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(input.value).to.be.equal("3");
 				done();
 			});
@@ -240,7 +260,7 @@ describe("fieldSelect.vue", function() {
 			input.value = "4";
 			trigger(input, "change");
 
-			vm.$nextTick( () => {
+			vm.$nextTick(() => {
 				expect(model.city).to.be.equal(4);
 				done();
 			});