如何为radio按钮添加onchange事件并传入street下拉框的选中值

原尝试写法失效原因 #

在HTML事件属性中嵌入<script>标签不符合HTML解析规则：事件属性内仅支持直接执行的JS表达式，无法内嵌独立脚本标签；同时代码中嵌套的双引号会直接和HTML属性的引号边界冲突，导致页面解析报错，逻辑完全无法运行。

改造思路 #

不追求在HTML属性里手动拼接传参，而是把参数读取的逻辑统一放到GetNumber函数内部：不管是street下拉框触发联动，还是radio单选框触发联动，调用同一个GetNumber时，自动从DOM读取当前最新的street选中值、radio选中值，再传给后端做数据过滤。这种方式不用改动零散的事件绑定代码，后续新增联动条件也只需要调整函数内部逻辑即可。

改造后代码 #

改造后的GetNumber函数 #

function GetNumber() {
  // 自动读取两个联动筛选参数
  const currentStreet = document.getElementById("street").value;
  const currentAddressType = document.querySelector('input[name="addressType"]:checked').value;

  google.script.run.withSuccessHandler(function(ar) {
    console.log(ar);
    // 清空原有选项
    number.length = 0;
    
    // 追加默认空选项
    let emptyOption = document.createElement("option");
    emptyOption.value = "";
    emptyOption.text = "";
    number.appendChild(emptyOption);

    // 填充匹配的地址选项
    ar.forEach(function(item, index) {    
      let option = document.createElement("option");
      option.value = item[2];
      option.text = item[1];
      number.appendChild(option);    
    });
  // 将两个筛选条件同步传给后端接口
  }).getNumbers(currentStreet, currentAddressType);
}

改造后的表单HTML #

<form method="post" id="form" action="<?= url ?>" >   
  <label >Indirizzo</label><br>
  <!-- 给street下拉框补充id方便DOM查询，事件绑定直接调用无参GetNumber -->
  <select name="street" id="street" onchange="GetNumber()" >
    <option value="" ></option>
    <? for(var i = 0; i < streets.length; i++) { ?>      
      <option value="<?= streets[i] ?>" ><?= streets[i] ?></option>
    <? } ?>
  </select><br><br>

  <label class="radio-inline">
    <!-- 两个radio统一绑定onchange事件 -->
    <input type="radio" name="addressType" value="Domestic" onchange="GetNumber()">Domestic
  </label>
              
  <label class="radio-inline">
    <input type="radio" name="addressType" value="Non-Domestic" checked onchange="GetNumber()"> Non-Domestic
  </label><br>

  <label >Civico</label><br>
  <select name="number" id="number" onchange="ShowCondominiums(this.value)" >
  </select><br><br>

  <span id="Condominiums" >Condominiums: </span><br>
  <label >Some Data to Store as Sample</label>
  <input type="text" name="name" /><br>
</form>

配套调整提示 #

• 后端的getNumbers方法需要同步改造，接收街道值、地址类型两个入参，根据双条件过滤后再返回匹配的门牌号数据
• 当street下拉框为空时，触发联动会自动传空值给后端，可根据业务逻辑补充空值拦截判断
• 所有触发联动的控件都绑定同一个GetNumber方法，不需要单独在每个事件里写取参数的逻辑，避免代码重复

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