How to update Widgets or Card without rewriting the code in Gmail Addon using card Services

Question

I am developing a Gmail addon by using the Card service which is provided by App Script. My requirement is that there are two dropdowns and when I select the first dropdown option the second dropdown options are updated. The second dropdown options vary according to the selected value of the first dropdown. I have written code below in which the buildCard() function is called two dropdowns added to the card section.

There is a handle change method first dropdown named handleDropdownChange. In this function, I have written the code again for two dropdowns with different options according to the selected option of the first dropdown.

So my concern is that if there are multiple dropdowns and all dropdown options are dependent on each other then, I have to write the same piece of code again and again which is not a good way.

So is there any way to update the options without rewriting the same code many times and without navigating cards?

I'd appreciate any insights, code examples, or guidance on how to approach this problem. Thanks in advance for your help!

function buildCard() {
  var card = CardService.newCardBuilder();

  // First dropdown
  var dropdown1 = CardService.newSelectionInput()
    .setType(CardService.SelectionInputType.DROPDOWN)
    .setTitle('First Dropdown')
    .addItem('Option 1', 'option1',false)
    .addItem('Option 2', 'option2',false)
    .setFieldName('dropdown1');

  // Add OnChangeAction to the first dropdown
  dropdown1.setOnChangeAction(CardService.newAction()
    .setFunctionName('handleDropdownChange'));

  card.addSection(CardService.newCardSection().addWidget(dropdown1));

  // Second dropdown (initially empty)
  var dropdown2 = CardService.newSelectionInput()
    .setType(CardService.SelectionInputType.DROPDOWN)
    .setTitle('Second Dropdown')
    .addItem('Option 1', 'option1',false)
    .addItem('Option 2', 'option2',false)
    .setFieldName('dropdown2');

  card.addSection(CardService.newCardSection().addWidget(dropdown2));

  return card.build();
}

function handleDropdownChange(e) {
  var formInput = e.formInput;
  var selectedValue = formInput.dropdown1;

  var card = CardService.newCardBuilder();

  // First dropdown (unchanged)
  var dropdown1 = CardService.newSelectionInput()
    .setType(CardService.SelectionInputType.DROPDOWN)
    .setTitle('First Dropdown')
    .addItem('Option 1', 'option1',selectedValue==="option1" ?true:false)
    .addItem('Option 2', 'option2',selectedValue==="option2" ?true:false)
    .setFieldName('dropdown1')
    .setOnChangeAction(CardService.newAction()
      .setFunctionName('handleDropdownChange'))
  card.addSection(CardService.newCardSection().addWidget(dropdown1));

  // Second dropdown with updated options
  var dropdown2 = CardService.newSelectionInput()
    .setType(CardService.SelectionInputType.DROPDOWN)
    .setTitle('Second Dropdown')
    .setFieldName('dropdown2');

  if (selectedValue === 'option1') {
    dropdown2.addItem('Option A', 'optionA',false);
    dropdown2.addItem('Option B', 'optionB',false);
  } else if (selectedValue === 'option2') {
    dropdown2.addItem('Option X', 'optionX',false);
    dropdown2.addItem('Option Y', 'optionY',false);
  }

  card.addSection(CardService.newCardSection().addWidget(dropdown2));

  var navigation = CardService.newNavigation().updateCard(card.build());
  return CardService.newActionResponseBuilder()
    .setNavigation(navigation)
    .build()
}