Pass element from option select populated from JSON to Controller

This my very first post, for several months I was able to find correct answer but this time I stuck.
I manage to create in JavaScript functions to create dependent - cascade drop-down-lists, when I choose Car Brand, then Models are served in next list and series in another accordingly.
But can not send the chosen positions to Java Controller. Im open to criticism :-) Ill be very grateful for any help.

So the view looks as follows:

<!-- language: lang-html -->

	<form  action=make method="POST">
<div class="item">
<h3 class="item-title">Choose car</h3>
<span class="year"></span>
<select id="name" name="name" class="wrapper"  onchange="populateSelectModel(), populateSelectSeries()">
<option   value="">--Select--</option>
</select>
<select id="model" name="model" onchange="populateSelectSeries()" >
<option value="">--Select--</option>
</select>
<select id="seria" name="seria">
<option value="">--Select--</option>
</select>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<button type="submit" class="btn-primary">Submit</button>
</div>
</form>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var selectBrand = document.getElementById("name");
var selectModel = document.getElementById("model");
var selectSeries = document.getElementById("seria");
var ourData;
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://raw.githubusercontent.com/ahmetozalp/auto-cars-makes-models-types/master/cars.json');
ourRequest.onload = function(){
ourData = JSON.parse(ourRequest.responseText);
var selectedBrand = populateSelectBrand(ourData);
populateSelectModel();
populateSelectSeries();
};
ourRequest.send();
function populateSelectBrand(lista) {
for (var i = 0; i < lista.length; i++) {
selectBrand.innerHTML = selectBrand.innerHTML +
'<option value="">' + lista[i].brand + '</option>';
}
}
function populateSelectModel() {
selectModel.innerHTML = '<option value="">Select model';
var jakIndex = selectBrand.selectedIndex - 1;  
var howlong = ourData[jakIndex].models.length;
for (var i = 0; i < howlong; i++) {
selectModel.innerHTML = selectModel.innerHTML +
'<option value="">' + ourData[jakIndex].models[i].title + '</option>';       
}
}
function populateSelectSeries() {
selectSeries.innerHTML = '<option value="">Select series';
var jakiIndex = selectBrand.selectedIndex -1 ;  
var jakiIndexModelu = selectModel.selectedIndex-1;
var howlong1 = ourData[jakiIndex].models[jakiIndexModelu].types;
for (var i = 0; i < howlong1.length; i++) { 
selectSeries.innerHTML = selectSeries.innerHTML +
'<option value="">' + ourData[jakiIndex].models[jakiIndexModelu].types[i] + '</option>';       
}
}

<!-- end snippet -->

==================================================================
Finally when I can get via Controller the selected values from "name","model","series" I`m getting empty Strings (not null)
Java Controller

@Controller

@RequestMapping("make")
public class MAkeController {

@PostMapping
public String downloadMake(String name, String model, String seria) throws IOException {
return ("download");
}

}

screen shot from IntelliJ, while debugging

While populating the select drop-down options, you are setting option tag value as empty string value="" in all the three functions as below

<option value="">

You need to set the respective item in value attribute of option tag too.

For example, similar to below in populateSelectBrand function:

selectBrand.innerHTML = selectBrand.innerHTML + '<option value="' + lista[i].brand + '">' + lista[i].brand + '</option>';

Do the same in other functions too.

When you do form submit, the selected option value will be sent to the server not the label displaying in thr UI screen.