使用HTML与JavaScript实现级联下拉时二级下拉change事件不触发如何解决

问题根因 #

• 二级事件的选择器写法错误：$visuals不是合法的jQuery ID选择器，正确写法为#visuals，导致事件没有绑定到目标元素
• Bootstrap-select组件动态填充option后未执行刷新操作，组件无法识别新增的选项，导致change事件无法触发
• 二级change事件的AJAX代码存在语法错误：多写了一个闭合大括号，代码执行时报错终止运行

前端修正代码 #

JS代码修正 #

$("#etfs").change(function() {
  $.ajax({
    type: "POST",
    url: "{{ url_for('visuals') }}",
    data: {
      etf: $("#etfs").val()
    },
    success: function(data) {
      var html = "";
      for (var count = 0; count < data.length; count++) {
        html += '<option value="' + data[count].id + '">' + data[count].visual + "</option>";
      }
      $("#visuals").html(html);
      // 新增刷新bootstrap-select组件逻辑
      $("#visuals").selectpicker('refresh');
    }
  });
});

$(document).on("change", "#visuals", function() {
  $.ajax({
    type: "POST",
    url: "{{ url_for('graphs') }}",
    data: {
      visual: $("#visuals").val()
    },
    success: function(data) {
      // 若需要显示闪现消息可添加此行刷新页面
      window.location.reload();
    }
  });
});

HTML标签修正 #

原select标签重复定义了class属性，合并为以下写法即可：

<select name="visuals" data-live-search="true" id="visuals" class="form-control selectpicker" title="Select Visual"> </select>

后端代码优化建议 #

当前graphs接口返回完整页面，配合前端新增的window.location.reload()即可正常显示闪现消息。如果后续需要实现无刷新渲染图表，可将返回值改为JSON格式，前端动态渲染即可。

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