Using JavaScript and DOM manipulation to create Cascading Drop Down but rendering incorrectly

Question

I have a simple list that has two drop downs. I am using JavaScript to create a cascading drop down functionality. A reference to my JavaScript file is placed in a content editor webpart of the list form and it functions perfectly. The problem is when I click submit, incorrect values are entered into the list. Not sure why. Please help!

Here's the set-up. I have two lists. A 'Service' list and a 'Service Category' lists. A 1-many relationship. When a value is select in the 'Service' list, that value is used to filter the 'Service Categories' list.

Here's an image for more clarity:

$(document).ready(function(){
//alert(document.querySelector("[title='Service']"));
cascadeDropDown();    
});


function cascadeDropDown(){
var service = document.querySelector("[title='Service']");

service.onchange = function(){
    var serviceSelection = service.options[service.selectedIndex].value;
    console.log("Service: "+serviceSelection);
    getServiceSubValue(serviceSelection);
}
}            

function getServiceSubValue(selectedValue){
//alert(selectedValue)

var category = document.querySelector("[title='Category']");
clearCategoryOption();
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Service%20Categories')/items?$filter=Service eq'" + selectedValue + "'";
var headers = { "accept": "application/json;odata=verbose" };        

                    jQuery.ajax({
                        url: endPointUrl,                            
                        type: 'GET',
                        headers: headers,
                        success: function(data){
                            //console.log(data.d.results);
                            //alert(data.d.results);
                            for(var i=1; i<data.d.results.length; i++){
                                console.log(data.d.results[i].Title);
                                console.log(i);
                                var opt = document.createElement("option");
                                opt.value = i;
                                opt.text = data.d.results[i].Title;
                                category.add(opt,null);
                            }
                        }
                   })
 }

 function clearCategoryOption(){
  var category = document.querySelector(" 
  [title='Category']").options.length=0;
 } 

Answer 1

As Category is lookup field from another list, you need to add the value of dropdown options to the Id's of the items of list from where you are looking up.

So you need use opt.value = data.d.results[i].ID in your for loop.