下拉框仅含单选项时onChange函数未触发问题咨询

问题场景 #

我有三个级联下拉框：

• 第一个下拉框加载账户列表
• 第二个下拉框加载所选账户关联的属性列表
• 第三个下拉框在选中属性后填充对应的数据流

问题：选择一个账户后，第二个下拉框被填充了唯一值（比如ABC），而这正是我要选的选项，但此时select2函数不会触发，第三个下拉框无法填充数据。必须先选其他值再重新选ABC才能触发函数。

原代码 #

HTML部分 #

//Account Drop Down
//Sample Values - getAccounts()
[ { createTime: 'xxxxx',
    regionCode: 'SA',
    displayName: 'ABC',
    name: 'accounts/XXXX',
    updateTime: 'xxxx' } ]

<div class="form-group">
  <label for="accountData">Select Account:</label>
  <select id="accountData" style="width: 100%" onchange="select1(this)">
    <? var data = getAccounts () ?>
    <? for (i=0; i<data.length; i++) { ?>
      <option>Select Account</option>
      <option value="<?= data[i].name.split('/')[1] ?>" ><?= data[i].displayName ?></option>
    <? } ?>
  </select>
</div>

//Property Field Drop Down
<div class="form-group">
  <label for="accountData2">Select Property:</label>
  <select id="accountData2" style="width: 100%" onchange="select2(this)">
    <option>Select Properties</option>
  </select>
</div>

//Third Dropdown
<div class="form-group">
  <label for="accountData3">Select Data Streams:</label>
  <select id="accountData3" style="width: 100%" onchange="">
    <option>Select Streams</option>
  </select>
</div>

JavaScript部分 #

function select1(e) {
  google.script.run.withSuccessHandler(ar => {
    const select = document.getElementById("accountData2");
    select.innerHTML = "";
    
    if (ar.length == 0) return;
    
    ar.properties.forEach(item => {
      const option = document.createElement("option");
      option.text = item.displayName;
      option.value = item.name.split('/')[1];
      select.appendChild(option);
    });
  }).withFailureHandler(er => {
    alert('This is error:' + er);
  }).listProperties(e.value);
}

function select2(e) {
  console.log(`${e.value} was selected.`);
  google.script.run.withSuccessHandler(ar => {
    console.log(ar)
    const select = document.getElementById("accountData3");
    select.innerHTML = "";
    
    if (ar.length == 0) return;
    
    ar.forEach(item => {
      const option = document.createElement("option");
      option.text = item.displayName;
      option.value = item.name.split('/')[3];
      select.appendChild(option);
    });
  }).withFailureHandler(er => {
    alert('This is error:' + er);
  }).listDataStreams(e.value);
}

解决方案 #

问题根源是：通过JS动态添加选项后，浏览器不会自动触发onchange事件。我们需要在select1的成功回调里，添加逻辑自动选中首个选项并手动触发事件。

修改后的select1函数 #

function select1(e) {
  google.script.run.withSuccessHandler(ar => {
    const select = document.getElementById("accountData2");
    // 保留默认提示选项
    select.innerHTML = '<option>Select Properties</option>';
    
    if (!ar.properties || ar.properties.length === 0) return;
    
    ar.properties.forEach(item => {
      const option = document.createElement("option");
      option.text = item.displayName;
      option.value = item.name.split('/')[1];
      select.appendChild(option);
    });

    // 自动选中首个属性选项并触发onchange
    if (select.options.length > 1) {
      select.selectedIndex = 1; // 跳过默认提示选项
      select.dispatchEvent(new Event('change'));
    }
  }).withFailureHandler(er => {
    alert('错误信息:' + er);
  }).listProperties(e.value);
}

额外优化 #

1. 修复第一个下拉框重复添加默认选项的问题：

<select id="accountData" style="width: 100%" onchange="select1(this)">
  <option>Select Account</option>
  <? var data = getAccounts () ?>
  <? for (i=0; i<data.length; i++) { ?>
    <option value="<?= data[i].name.split('/')[1] ?>" ><?= data[i].displayName ?></option>
  <? } ?>
</select>

内容的提问来源于stack exchange，提问作者Arif Ahmed