Javascript "onChange" doesn't trigger on element value change

Question

My approximate HTML:

<td style="width: 25%">
  <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span>
  </label>
  <select name="dropdown_status" style="display: none;">
    <option value=""></option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2</option>
    <option value="3"> Option 3</option>
    <option value="4"> Option 4</option>
  </select>
  <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;">
    <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
      <span>Option 1</span>
    </a>
  </div>
</td>

My javascript:

$(document).ready(function() {
    startProgram();
});

function startProgram() {
    let automationStatusElement = document.getElementsByName("dropdown_status")[0].nextSibling.children[0].children[0];
    automationStatusElement.addEventListener('change', function() {
        console.log("dropdown_status changed");
    });
}

When I change the dropdown option - It changes <span>Option 1</span> text, but I can't get the event to fire console.log("dropdown_status changed");. I verified automationStatusElement variable has the correct element. It just doesn't detect change.

Any help what I am missing here? Thanks

Answer 1

You probably want to do something like this instead;

const drop = document.querySelector("[name=dropdown_status]");

drop.addEventListener("change", (e) => {
  const selectedOption = e.target[e.target.options.selectedIndex].text;
  const span = document.querySelector("a > span");
  span.textContent = selectedOption;
})

<td style="width: 25%">
  <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span>
  </label>
  <select name="dropdown_status">
    <option value=""></option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2</option>
    <option value="3"> Option 3</option>
    <option value="4"> Option 4</option>
  </select>
  <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;">
    <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
      <span>Option 1</span>
    </a>
  </div>
</td>

Answer 2

You could also make it work by dispatching a CustomEvent yourself, when you change the content of the span. For example:

document.querySelector("select").addEventListener("change", (e) => {
  let span = e.target.nextElementSibling.querySelector("span");
  span.innerText = "changed";
  span.dispatchEvent(new CustomEvent("change"));
});

function startProgram() {
    let automationStatusElement = document.getElementsByName("dropdown_status")[0].nextElementSibling.children[0].children[0];
    
    automationStatusElement.addEventListener('change', function() {
        console.log("dropdown_status changed");
    });
}

startProgram();

<td style="width: 25%">
  <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span>
  </label>
  <select name="dropdown_status" style="xdisplay: none;">
    <option value=""></option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2</option>
    <option value="3"> Option 3</option>
    <option value="4"> Option 4</option>
  </select>
  <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;">
    <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
      <span>Option 1</span>
    </a>
  </div>
</td>