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 /自举-multiselect.js
自举-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...");
      }
    });
  });
});

问题

每当我更改选项时，我都会收到两次警报＆＃34;我被叫...＆＃34;，表示表单已提交两次。

期望

我想要提交一次或调用一次。

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

我该如何解决这个问题？

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

Answer 1

首先抱歉回答错误，在查看问题时犯了一个错误。

所以这是解决方案。你需要像这样调用multiselect。函数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 Multi-Select Form提交两次

2 个答案: