Javascript：“选择”和“点击”行为不符合预期

Posted 2023-05-07

【中文标题】Javascript：“选择”和“点击”行为不符合预期

【英文标题】：Javascript : 'select' and 'onclick' behavior isn't as expected

【发布时间】：2021-10-12 20:12:01

【问题描述】：

我有一个无限的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 >AKUN</th>
                    <th >DEBIT</th>
                    <th >CREDIT</th>
                    <th  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时它不能正常工作。

【参考方案1】：

添加到表格后只需要绑定元素选择

for (var c = 0; c < arrHead.length; c++) 
.
..
...            

// bind element
$('.select_ids').select2()

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