jQuery无法捕获Select下拉框Change事件以提交表单问题

看起来你遇到的问题是绑定在#slc_level上的change事件没触发，而同页面其他元素的change事件正常工作，我来帮你排查几个常见的原因和解决办法：

1. 确保DOM加载完成后再绑定事件 #

如果你的jQuery代码是在页面DOM还没渲染完成时执行的，那$('select#slc_level')根本找不到对应的元素，自然绑定不上事件。

解决办法：把你的代码包裹在$(document).ready()里，或者把脚本放在页面底部（</body>标签前）：

$(document).ready(function() {
  $('select#slc_level').change(function(event){ 
    event.preventDefault(); 
    console.log('changed') 
    $('form#formLevel').submit(); 
  });
});

2. 检查是否是动态生成的元素（事件委托） #

如果你的Level widget是通过AJAX或者其他方式动态加载到页面中的（比如页面初始加载后才渲染这个widget），直接绑定事件会失效——因为绑定的时候元素还不存在。这时候需要用事件委托，把事件绑定到父级静态元素上：

// 推荐把document换成更接近的静态父元素，比如.widget或者.col-md-3，性能更好
$(document).on('change', 'select#slc_level', function(event){ 
  event.preventDefault(); 
  console.log('changed') 
  $('form#formLevel').submit(); 
});

3. 检查ID是否重复 #

确认页面中没有其他元素使用了slc_level或者formLevel的ID，因为ID是唯一的，如果有重复，jQuery只会选中第一个匹配的元素，导致你的select绑定失败。

4. 移除不必要的event.preventDefault() #

另外提一下，select的change事件本身没有默认的跳转/提交行为，你这里的event.preventDefault()其实是多余的，甚至可能在某些情况下干扰后续的表单提交，建议可以去掉试试：

$(document).ready(function() {
  $('select#slc_level').change(function(){ 
    console.log('changed') 
    $('form#formLevel').submit(); 
  });
});

你可以先从第一个原因开始排查，因为DOM加载顺序是最常见的问题。如果还是不行，再试试事件委托的方式。

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