第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

追加后,bootstrap multiselect 在表中不起作用

追加后,bootstrap multiselect 在表中不起作用

BIG陽 2023-05-25 18:12:02
我面臨一個問題,即在表 >> td 中添加一個新的多選框后,我無法制作引導多選框。我閱讀了 StackOverflow 和其他社區(qū)上的多個線程,但我無法得到肯定的答案。我正在嘗試在我的代碼中單擊PLUS BTN“新建”時TR將附加多選框。但除了一個多選框外它不起作用。請幫助我如何修復這段代碼,這將按照我的期望工作,我正在解釋..我在哪里做錯了?我的代碼和錯誤截圖如下: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,});
查看完整描述

1 回答

?
翻過高山走不出你

TA貢獻1875條經(jīng)驗 獲得超3個贊

實現(xiàn)上述目標的一種方法是將所有選項分配給某個變量,并將相同的選項傳遞給您的mutliselectusing setOptions,然后rebuild在您將新的 trs 附加到 table 時傳遞給您的 mutliselect 。


演示代碼:


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>


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關(guān)注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號