1

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: enter image description here

$(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. – Ganesh Sanap Dec 1 '18 at 3:45
  • Is this service and category columns are lookup used in third list? – Ganesh Sanap Dec 1 '18 at 3:51
  • My category column in my 'Service' list is a lookup into my 'Service Category' – OLA Dec 1 '18 at 3:58
  • And this form is of Service category list... Right? – Ganesh Sanap Dec 1 '18 at 4:00
  • The form is the 'Service' list – OLA Dec 1 '18 at 4:01
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.

  • Argh! It won't allow me to upvote b/c I have less than 15 reputations. – OLA Dec 1 '18 at 4:16
  • No problem. You got your answer that's important :) – Ganesh Sanap Dec 1 '18 at 4:20
  • haha..my reputation just went up. I upvoted the answer. Thanks again! – OLA Dec 1 '18 at 4:26

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.