Can I create one dropdown with two children?

[Bloodlvst]

Hi there,

I’m trying to create a dropdown cascade which works like the following:

Parent Dropdown
—Child Dropdown 1
—Child Dropdown 2

I want to select an item in the parent dropdown, and based on the value, populate both of the child dropdowns with the same options.

Is this even possible? And if so, is it also possible to filter the child dropdowns so they both can’t have the same value?

Thanks!

[Alexander Bautz]

You cannot do this with cascading dropdowns, but with spjs-lookup as described in this post: https://spjsblog.com/forums/topic/issues-with-creating-multiple-cascading-rules-tied-to-same-lookup-list/#post-10074

Regarding filtering of the dropdowns:
Is it when saving the form you need these to to not have the same value? – if so, add something like this in your Custom JS:

function dffs_PreSaveAction(){
    var field1Value1 = getFieldValue("The_first_field");
    var field1Value2 = getFieldValue("The_second_field");
    if(field1Value1 === field1Value2){
        spjs.dffs.alert({
            "title": "Cannot save...",
            "msg": "You cannot select the save value in both The_first_field and The_second_field - please correct."
        });
        return false; // Stops the save and exits code
    }
    return true; // Saves the item if this line is reached
}

Alexander

[Bloodlvst]

Thanks Alex you’re the man, this does exactly what I wanted!

I did notice if I change the parent dropdown after selecting something in the child dropdown, the children still contain a value that shouldn’t be available based on the parent option. Is there any way to force the child dropdowns to “reset” if the parent is changed?

[Alexander Bautz]

Is there an option in the child dropdown that is from the previous parent choice, or is it NOT showing, but saving the item will save the value already selected from the last change of the child?

You can try setting the value back to “” like this:

$("#SPJSLookupParent_spjs_lookup").change(function(){
	var val = $(this).find("option:selected").text();
	// Delete current instances of child selects
	spjs.lookup.kill("SPJSLookupChild1");
	spjs.lookup.kill("SPJSLookupChild2");
	// Set the value back to an empty string
	setFieldValue("SPJSLookupChild1", "");
	setFieldValue("SPJSLookupChild2", "");

Alexander

[Bloodlvst]

It was the first one, changing the parent made an option from the previous parent still show in the dropdown.

But, your fix worked! Everything is working 100% perfectly now 😀

Thank you so much for the quick response!

[Author]

Posts