Jump to content

Cascading Dropdown Value And Source Values


Recommended Posts

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!

Link to post
Share on other sites
  • 2 months later...

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 by LWSChad
clarity
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...