CodeIgniter3依赖下拉框onclick事件在Chrome中失效问题排查

Chrome浏览器不支持<option>标签的onclick事件，这就是功能在Chrome失效的核心原因——Firefox会触发option的onclick，但Chrome仅会在<select>标签上响应onchange事件。

把事件绑定从<option>移到<select>上，通过onchange事件判断选中值，再执行对应逻辑：

修改后的HTML代码 #

<div class="form-group">
    <label for="exampleInputName1">Product Category</label>
    <select name="product_category_lists" class="form-control" id="cat_id" required="" onchange="handleCategoryChange(this.value)">
     <option value="">--Select Category</option>
     <option value="fresh_food">Home</option>
     <option value="broth">Kitchen</option>
    </select>
</div>
<div class="form-group">
  <label for="exampleInputName1" >Product</label>
  <select name="product_category"  id="cust_drop" class="form-control" required>
    <option value="">--Select Category</option>
  </select>
</div>

修改后的JS代码 #

function handleCategoryChange(selectedValue) {
    const custDrop = document.getElementById('cust_drop');
    // 清空下拉框
    custDrop.innerHTML = "";
    
    let options = '<option value="">--Select Category</option>';
    
    if (selectedValue === 'fresh_food') {
        // Home分类对应选项
        options += '<option value="tv_appliances">TV & Appliances</option>';
    } else if (selectedValue === 'broth') {
        // Kitchen分类对应选项，可按需扩展
        options += '';
    }
    
    custDrop.innerHTML = options;
}

• 不要在option上绑定点击事件，浏览器兼容性极差，select的onchange是标准兼容方案
• 原代码中第二个下拉框的option值全为空，实际开发要给选项设置有效value，否则表单提交无法获取正确选中值
• 可把选项数据抽成对象，方便后续维护：

  const categoryOptions = {
      'fresh_food': ['<option value="tv_appliances">TV & Appliances</option>'],
      'broth': []
  };
  

  之后在handleCategoryChange里直接取对应数据拼接即可

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