Javascript : 'select' 和 'onclick' 行为不符合预期

Question

我有一个无限的 select2，通过使用按钮显示 select2 但它不起作用，我的脚本有问题吗？

这是使用 onclick 按钮添加无限 select2 的脚本：

<div id="cont"></div>
<button id="addRow" onclick="addRow();"> Add Rows</button>

这是调用函数select2

<script type="text/javascript">

    var arrHead = new Array();
    arrHead     = ['AKUN', 'DEBIT', 'CREDIT','#']; 

    function createTable() {
        var empTable       = document.createElement('div');
        empTable.setAttribute('class', 'ed-tab');

        empTable.innerHTML = `
            <table id="empTable" class="table table-borderedless table-striped w-100">
                <thead>
                <tr>
                    <th width="50%">AKUN</th>
                    <th width="22%">DEBIT</th>
                    <th width="22%">CREDIT</th>
                    <th width="6%" class="text-center">#</th>
                <tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                </tbody>
            </table>
        `;

        var div = document.getElementById('cont');
        div.appendChild(empTable);

    }

    function addRow() {

        var empTab  = document.getElementById('empTable');
        var rowCnt  = empTab.rows.length;
        var tr      = empTab.insertRow(rowCnt);

        for (var c = 0; c < arrHead.length; c++) {
            var td = document.createElement('td');
            td     = tr.insertCell(c);
            
            if (c == 0) { 
                var select  = document.createElement("select");
                select.setAttribute('type', 'text');
                select.setAttribute('class', 'form-control select_ids');
                select.innerHTML = `
                    <select class="form-control form-search" placeholder="tes" type="text" >
                        <option></option>
                        <?php 
                            $kodeakun_q = $db->query("SELECT * FROM tb_akun WHERE parent_akun >= 0");
                            if ($kodeakun_q->num_rows > 0) {
                                while($row = $kodeakun_q->fetch_assoc()){
                        ?>
                        <option id="func/f_insert.php?select_id=<?= $row['kode_akun'] ?>" value="<?= $row['kode_akun'] ?>"> 
                            <?= $row['kode_akun']; ?> | <?= $row['nama_akun'] ?> 
                        </option>
                        <?php } }  ?>
                    </select>
                `;
                td.appendChild(select);
            }else if( c == 1){
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('class', 'form-control');
                ele.setAttribute('value', '');
                td.appendChild(ele);
            }else if (c == 2) {
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('class', 'form-control');
                ele.setAttribute('value', '');
                td.appendChild(ele);
            }else if(c == 3){
                var button       = document.createElement("button");
                button.setAttribute('class', 'btn btn-danger');
                button.setAttribute('onclick', 'removeRow(this)');
                button.innerHTML = `<i class="fas fa-trash"></i>`;
                td.appendChild(button);
            }
        }

    }
    
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);
    }

    function submit() {
        var myTab = document.getElementById('empTable');
        var arrValues = new Array();

        for (row = 1; row < myTab.rows.length - 0; row++) {
            for (c = 0; c < myTab.rows[row].cells.length; c++) {
                var element = myTab.rows.item(row).cells[c];
                if (element.childNodes[0].getAttribute('type') == 'text') {
                    arrValues.push("'" + element.childNodes[0].value + "'");
                }
            }
        }

        console.log(arrValues);
    }

</script>

这是 select2 的主要脚本：

<script>
    
    $(document).ready(function(){
        $(".select_ids").selectize({
            placeholder: "Pilih Akun . . .",
            allowClear: true,
        });
        
    });
    
</script>

注：
我在 onclick 按钮中添加了一个函数来调用 select2，但它只在第一个 select2 中有效，当我添加 select2 时它不能正常工作。

Answer 1

添加到 table

后，您只需要绑定元素 select

for (var c = 0; c < arrHead.length; c++) {
.
..
...            
}
// bind element
$('.select_ids').select2()

演示 jsfiddle：https://jsfiddle.net/4uja63fh/

Javascript : 'select' 和 'onclick' 行为不符合预期

Javascript : 'select' and 'onclick' behavior isn't as expected

html

javascript

php

jquery

jquery-select2