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
  • ブートストラップ-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...");
      }
    });
  });
});

問題

オプションを変更すると、フォームが 2 回送信されたことを意味する「I am Called...」というアラートが 2 回表示されます。

期待

これを一度送信するか、一度呼び出す必要があります。

注: Simple Select オプションを使用すると、アラートが 1 回呼び出されることはわかっていますが、Bootstrap の複数選択を使用すると、アラートが 2 回呼び出されます。

どうすればこれを修正できますか?

フォームの送信を制御する必要があり、Bootstrap multiselect または使用するプラグインのその他の非表示メソッドからは必要ありません。

4

2 に答える 2

0

返信ありがとうございます。これで私の問題を解決できたようです:-)

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

Jfiddleでも利用できます。jsfiddle.net/dchockal/fkypqwf0

于 2015-04-25T10:13:42.133 に答える