Bootstrap 多Select 表单提交两次

Question

我在使用 bootstrap-multiselect 和 ajax 时遇到问题。

我的表格 :

<form class="fill" method="POST" id="inputForm">  
  <select id="SelectIDExample">
    <option value="1">Option 1</option>
    <option value="2" selected="selected">Option 2</option>
    <option value="3" >Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
  </select>
</form>

我的图书馆:

css/bootstrap.min.css
js/jquery.min.js
js/bootstrap.min.js
js/bootstrap-multiselect.js
bootstrap-multiselect.css

这是我的 JavaScript 的一小段：

$(document).ready(function() {
  $('#SelectIDExample').multiselect({
    buttonWidth: '400px',
    dropRight: true,
    onChange: function(option, checked, select, event) {
      event.preventDefault();
      return false;
    },

  });

  $('#inputForm').change(function(e) {
    e.preventDefault();
    var form = $(this);
    var post_data = form.serialize();

    $.ajax({
      type: 'POST',
      data: post_data,
      success: function() {
        alert("I am Called...");
      }
    });
  });
});

问题

每当我更改选项时，都会收到两次提醒 "I am Called..."，这意味着表单被提交了两次。

预期

我希望这个提交一次或调用一次。

注意：我知道使用 Simple Select 选项时，警报会被调用一次，但是当我使用 Bootstrap multi-select 时，警报会被调用两次。

我该如何解决这个问题？

我需要控制表单的提交，不需要 Bootstrap multiselect 或使用插件的任何其他隐藏方法。

Answer 1

首先不好意思回答，看题的时候弄错了

所以这是解决方案。您需要像这样调用多选。函数 onChange 仅适用于 2 个参数，这就是为什么您无法阻止它传播的原因，您可以检查是否在控制台上输出值。

解决方案

    $('#SelectIDExample').multiselect({
        buttonWidth: '400px',
        dropRight: true,
      }).change(function(e) {
        e.preventDefault();
    });

Answer 2

谢谢大家的回复。看来这能够解决我的问题:-)

 $('#SelectIDExample').multiselect({
        buttonWidth: '400px',
        dropRight: true,
        preventInputChangeEvent: true
      });

在 Jfiddle 中也可用。 jsfiddle.net/dchockal/fkypqwf0

Bootstrap 多Select 表单提交两次

Bootstrap Multi-Select Form submit twice

jquery

twitter-bootstrap

bootstrap-multiselect