Avoid "reference is broken" after insertion to collection

[domivax]

Dear All.

I have on my page three Dropdown List (category1, category 2 & category3), a button to submit data to collection.

I have a collection (myCollection) with three Reference Fields

And the following code.

export function ButtonInsert_click(event) {
let category1 = $w("#DropdownCategory1").value //mandatory
let category2 = $w("#DropdownCategory2").value //optional
let category3 = $w("#DropdownCategory3").value //optional

const toInsert = {
"subCategory1": category1,
"subCategory2": category2,
"subCategory3": category3,
};
wixData.insert("myCollection", toInsert)
}

When the three dropdown are filled out, is OK but the category2 and category3 are optional so the collection results like this… “reference is broken”

How to amend my code to insert nothing into SubCategory2 & SubCategory3 if their related Dropdowns are empty.

Thank you for your help.
Best regards,
Domivax

[J.D]

You should insert the category id (as appears in the other collection) not the category name.

[domivax]

Thank you J.D. for your reply. I already do that. I expected to insert an if statement telling “if Dropdown is null then nothing is inserted” but I don’t know how to write it because I cannot write it between the toInsert brackets.