追加後、ブートストラップマルチセレクトがテーブルで機能しない

サティヤムクマール

テーブル>> tdに新しい複数選択ボックスを追加した後、ブートストラップ複数選択ボックスを作成できないという問題に直面しています。

StackOverflowや他のコミュニティで複数のスレッドを読みましたが、肯定的な答えを得ることができませんでした。[PLUS BTN新規]をクリックするTRと、複数選択ボックスが追加されます。ただし、1つの複数選択ボックス以外は機能しません。

私がここで私の期待として機能するこのコードを修正する方法を教えてください私は説明しています..どこで間違いをしているのですか?

私のコードとエラーのスクリーンショットは以下のとおりです。

エラーのスクリーンショット

var maxMachineField = 10;
var xMachine = 1;
$('.add_MoreMachine__button').click(function() {
  if (xMachine < maxMachineField) {
    xMachine++;
    newrowMachine = '<tr class="errorMachine"><td>2</td><td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID"/></td><td><select id="select2" name="complaint[]" multiple class="form-control select2" ><option value="12345">This is Compaint 1</option><option value="1234567890">This is complaint 2</option></select></td><td><button type="button" class="btn btn-danger btn-circle float-right remove_Machinebutton"><i class="fa fa-minus"></i></button></td></tr>';
    var rowspanMachine = parseInt($('.fields_machineData').attr('rowspan')) + 1;
    $('.fields_machineData').attr('rowspan', rowspanMachine);
    $('.complaint_Machinetable tr:eq(0)').after(newrowMachine);
  }
});
$(".complaint_Machinetable").on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  xMachine--;
});

$('#select1,#select2,.select2').multiselect({
  nonSelectedText: 'Select Complaint',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth: '400px',
  dropup: true,
  includeSelectAllOption: true,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<table class="table table-striped table-hover table-bordered complaint_Machinetable">
  <tr class="complaint_Machinetable">
    <td class="fields_machineData">1</td>
    <td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID" /></td>
    <td>
      <select id="select1" name="complaint[]" multiple class="form-control">
        <option value="12345">This is Compaint 1</option>
        <option value="1234567890">This is complaint 2</option>
      </select>
    </td>
    <td><button type="button" class="btn btn-success add_MoreMachine__button"><i class="fa fa-plus"></i></button></td>
  </tr>
</table>

スワティ

上記を実現する1つの方法は、いくつかの変数内にすべてのオプションを割り当て、テーブル内に新しいtrsを追加するたびに、mutliselectusingsetOptionsrebuildmutliselectに同じオプションを渡すことです。

デモコード

var maxMachineField = 10;
var xMachine = 1;
$('.add_MoreMachine__button').click(function() {
  if (xMachine < maxMachineField) {
    xMachine++;
    //pass xmachnne value
    newrowMachine = '<tr class="errorMachine"><td>' + xMachine + '</td><td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID"/></td><td><select id="select2" name="complaint[]" multiple class="form-control select2" ><option value="12345">This is Compaint 1</option><option value="1234567890">This is complaint 2</option></select></td><td><button type="button" class="btn btn-danger btn-circle float-right remove_Machinebutton"><i class="fa fa-minus"></i></button></td></tr>';
    var rowspanMachine = parseInt($('.fields_machineData').attr('rowspan')) + 1;
    $('.fields_machineData').attr('rowspan', rowspanMachine);
    $('.complaint_Machinetable tr:last').after(newrowMachine);
  }
  //set option again
  $('.select2').multiselect('setOptions', selectconfig);
  $('.select2').multiselect('rebuild'); //rebuild
});
$(".complaint_Machinetable").on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  xMachine--;
  resetValues(); //call to reset count

});

function resetValues() {
  var counter = 2; //initialze to 2 because 1 is fixed

  //looping through tr not first one
  $("table tr:not(:first)").each(function() {
    //find 1st td replace its counter
    $(this).find('td:eq(0)').text(counter);
    counter++;
  })
}
//your options
var selectconfig = {
  nonSelectedText: 'Select Complaint',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth: '400px',
  dropup: true,
  includeSelectAllOption: true

}
//pass same to select2
$('.select2').multiselect('setOptions', selectconfig);
$(".select2").multiselect('rebuild'); //rebuild it
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<table class="table table-striped table-hover table-bordered complaint_Machinetable">
  <tr class="complaint_Machinetable">
    <td class="fields_machineData">1</td>
    <td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID" /></td>
    <td>
      <select id="select1" name="complaint[]" multiple class="form-control select2">
        <option value="12345">This is Compaint 1</option>
        <option value="1234567890">This is complaint 2</option>
      </select>
    </td>
    <td><button type="button" class="btn btn-success add_MoreMachine__button"><i class="fa fa-plus"></i></button></td>
  </tr>
</table>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

ブートストラップカルーセルが角度で機能しないのはなぜですか?

クリック機能でブートストラップモーダルが機能しない

角度ブートストラップ新しいディレクティブの追加が機能しない

カルーセルブートストラップが機能しない

ブートストラップレールが機能しない

マットソートがマットテーブルで機能しない

ブートストラップアクションのドロップダウンがテーブルレスポンシブ内で機能しない

ブートストラップテーマがAngularcliプロジェクトで機能しない

Angularjsで応答からのデータをバインドすると、ブートストラップマルチセレクトが機能しません

ブートストラップカルーセルliアイテムのアクティブクラスが機能しない

ブートストラップマルチアイテムカルーセルが応答しない

ツールチップが機能しない(ブートストラップ)

ContenteditableディレクティブがAngularUIブートストラップタブで機能しない

ブートストラップ3テーブルレスポンシブが機能しない

ブートストラップするcssスタイル.dropdown-メニュークラスが祖先/子孫セレクターで機能しない

ブートストラップモーダルがカルーセルスライドで機能しない

navnav-sidebarクラス内でブートストラップツールチップが機能しない

ブートストラップカルーセルテンプレートが機能しない

VueJSコンポーネントがブートストラップテーブルで機能しない

ツールチップブートストラップが機能しない

レスポンシブテーブルがブートストラップで機能しない

ブートストラップ ラベルのチェックボックスが機能しない

ブートストラップ: カルーセルが機能しない

ブートストラップ4カルーセルが機能しない

ブートストラップマルチレベルドロップダウンが機能しない

ブートストラップカルーセルスライダーアクティブクラスと次/前のボタンが機能しない

ブートストラップカルーセルスライドショーがFireFoxで機能しない

Vueマルチセレクトテンプレートスロットクリアが機能しない

マテリアル ブートストラップ デザインが React 18 で機能しない

TOP 一覧

  1. 1

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  2. 2

    PictureBoxで画像のブレンドを無効にする

  3. 3

    Postmanを使用してファイル付きの(ネストされた)jsonオブジェクトを送信する

  4. 4

    テキストフィールドの値に基づいて UIslider を移動します

  5. 5

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  6. 6

    追加後、ブートストラップマルチセレクトがテーブルで機能しない

  7. 7

    MyBatisがネストされたオブジェクト属性を参照するとOgnlExceptionが発生します

  8. 8

    Ansibleで複数行のシェルスクリプトを実行する方法

  9. 9

    tf.nn_conv2dとtf.nn.depthwise_conv2dの違い

  10. 10

    Python / SciPyのピーク検出アルゴリズム

  11. 11

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  12. 12

    「埋め込みブラウザのOAuthログイン」を有効にしてコールバックURLを指定した後でも、Facebookのコールバックエラーが発生する

  13. 13

    Dynamics365からローカルファイルにアクセスできます。ローカルリソースは許可されていません

  14. 14

    STSでループプロセス「クラスパス通知の送信」のループを停止する方法

  15. 15

    Rパッケージ「AppliedPredictiveModeling」のインストール中にエラーが発生しました

  16. 16

    Chromeウェブアプリのウェブビューの高さの問題

  17. 17

    ZScalerと証明書の問題により、Dockerを使用できません

  18. 18

    C ++でのcURLとマルチスレッドの使用

  19. 19

    mutate_allとifelseを組み合わせるにはどうすればよいですか

  20. 20

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  21. 21

    java.lang.NoClassDefFoundError:com / sun / istack / tools / DefaultAuthenticator $ Receiver

ホットタグ

アーカイブ