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;
}
Opt.value
should be the Id of item from Categories list.