Динамический выбор с помощью контроллера стимула

Question

У меня есть приложение Rails, и я использую Stimulus для заполнения выбора на основе динамических изменений двух других выборок в форме. Я скопировал большую часть этого с учебного сайта. Это прекрасно работает, ожидайте, что мой выбор будет заполнен дважды, как это:

• пункт 1
• пункт 2
• пункт 3
• пункт 1
• пункт 2
• пункт 3

Почему это делается дважды? После некоторой мысли это выглядит как onLoad увольняют несколько раз. У меня есть новый случай, когда мой просмотр БД возвращает одну строку, но это повторяет опцию выбора 4 раза.

Вот мой контроллер:

import { Controller } from "stimulus"

export default class extends Controller {

  static targets = [ "category", "budget", "vendor", "related" ]

  update_related() {

    let dropdown = this.relatedTarget;
    dropdown.length = 0;

    let defaultOption = document.createElement('option');
    defaultOption.text = 'Select parent expenditure...';

    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;

    const url = '/related_expenditures.json?vendor_id=' + this.vendorTarget.value + '&budget_id=' + this.budgetTarget.value;

    const request = new XMLHttpRequest();
    request.open('GET', url, true);

    request.onload = function() {
      if (request.status === 200) {
        const data = JSON.parse(request.responseText);
        let option;
        for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
          option.value = data[i].id;
          option.text = data[i].related_select_label;
          dropdown.add(option);
        }
       } else {
        // Reached the server, but it returned an error
      }   
    }

    request.onerror = function() {
      console.error('An error occurred fetching the JSON from ' + url);
    };

    request.send();

 }  

}