0

我在使用 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
  • 引导多选.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...");
      }
    });
  });
});

问题

每当我更改选项时，都会两次提醒我“我被叫...”，这意味着表单被提交了两次。

期待

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

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

我怎样才能解决这个问题？

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

4

2 回答 2

0

感谢您的所有回复。似乎这能够解决我的问题:-)

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

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

于 2015-04-25T10:13:42.133 回答
0

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

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

解决方案

    $('#SelectIDExample').multiselect({
        按钮宽度：'400px',
        dropRight：是的，
      }).change(函数(e) {
        e.preventDefault();
    });
于 2015-04-24T18:02:09.267 回答