Cascading Dropdown Value And Source Values

[kpcollier]

Hello,

I am trying to make a cascading dropdown field that receives the value from the parent field selection and still have the rest of the values from the dropdown source show along with it. Sort of like the option 'Match all when blank' but I want to match all - all the time, and populate the dropdown with the cascading value. 

I am building a scheduling calendar. We take information from our Work Order Table to use for creating records for the Scheduling Table. Each Work Order record has a technician assigned. When a work order is selected in the Scheduling Submission Form, the Technician field is populated. However, I need to be able to change this value for the Scheduling Table if needed. I need our scheduler to be able to select a work order, have the technician field populate, and have the ability to change the value.

Is it possible to have the Technician field be a regular dropdown with all of the values from the datasource, and then use javascript to prefill the value? Maybe, use a virtual field to get the cascading value, and then use JS to select the value in the tech dropdown? I have the virtual field set up, but if someone could help me out with the javascript, that would be appreciated!

[LWSChad]

Hi @kpcollier,

Choosing a specific value from a dropdown can be achieve with a bit of javascript.

First, identify the dropdown element and create an array the represents the dropdown choices:

const dropdownEle = document.querySelector('[name*=field_name]');
const dropdownChoices = dropdownEle.options;

Next, create the makeSelection function:

function makeSelection(selectionID) {

  // loop all the dropdown options
  for(let i = 0; i < dropdownChoices.length; i++) {
                                            
    // if the dropdownChoice matches the selectionID...
    if(dropdownChoices[i].value == selectionID) {
                                            
      // select the choice by the index number
      dropdownEle.selectedIndex = i;
    }
  }
}

Then, identify the cascading textfield and set it's onchange event to trigger the makeSelection function:

const vEle = document.querySelector('[name=cbParamVirtual1]');
vEle.onchange = function() {
  makeSelection(vEle.value);
};

 

I hope this helps

Edited June 5, 2021 by LWSChad
clarity

[kpcollier]

Thanks again, @ezIQchad. I appreciate the help.

[Kurumi]

For sorting the values in the Dropdown, you can check this forum post: 

Here are some references:

Numerical

- https://stackoverflow.com/questions/71075997/jquery-how-to-sort-list-text-taking-into-account-numerical-values
- https://codepen.io/AdamCCFC/pen/ZWpZLE

Alphabetical

- https://stackoverflow.com/questions/61460640/custom-sort-of-dropdown-options-using-jquery
- https://stackoverflow.com/questions/54479381/jquery-order-select-box-with-numbers
- https://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery