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;
 } 
11
  • Opt.value should be the Id of item from Categories list. Dec 1, 2018 at 3:45
  • Is this service and category columns are lookup used in third list? Dec 1, 2018 at 3:51
  • My category column in my 'Service' list is a lookup into my 'Service Category'
    – OLA
    Dec 1, 2018 at 3:58
  • And this form is of Service category list... Right? Dec 1, 2018 at 4:00
  • The form is the 'Service' list
    – OLA
    Dec 1, 2018 at 4:01

1 Answer 1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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