Question

我可以为每个文本字段添加许多行并添加事件，并在第一行成功使用php动态添加dropdwon。

但是当我在下拉列表中单击添加按钮事件时，我无法复制动态下拉列表。

这是Javascript：

                    <input type="button" id="addrow" value="Tambah Baris" />        
                <table cellspacing="0" cellpadding="3"class="order-list table table-striped responsive-utilities jambo_table bulk_action">
                  <thead>
                    <tr class="headings">
                        <th class="column-title"><div align="center">Draft ID </div></th>
                        <th class="column-title"><div align="center">Qty</div></th>
                        <th class="column-title"><div align="center">Uraian</div></th>
                        <th class="column-title"><div align="center">Harga Satuan </div></th>
                        <th class="column-title"><div align="center">Jumlah</div></th>
                        <th class="column-title"><div align="center">Aksi</div></th>
                    </tr>
                  </thead>

                    <tr>
                        <td>

                                <?php 
                                $result = mysql_query("select * from draft_order");    
                                $jsArrayDO = "var draftID = new Array();\n";
                                ?>
                                <select name="select" onchange="changeValue_draftID(this.value)" class="category-select">
                                  <option>-Pilih-</option>
                                  <?php while ($row = mysql_fetch_array($result)) {
                                    $jsArrayDO .= "draftID['" . $row['draft_id'] . "'] = {draft_qty:'" . addslashes($row['draft_qty']) . "',draft_isi:'".addslashes($row['draft_isi'])."'};\n";?>
                                  <option value="<?php echo $row['draft_id'];?>"><?php echo $row['draft_id'];?></option>
                                  <?php } ?>
                                </select>
                                <script type="text/javascript">
                                <?php echo $jsArrayDO; ?> 
                                function changeValue_draftID(id){
                                document.getElementById('draft_qty').value = draftID[id].draft_qty;  
                                document.getElementById('draft_isi').value = draftID[id].draft_isi;  
                                };  
                                </script>

                                </td>
                        <td><input type="text" name="draft_qty" id="draft_qty" size="3"/></td>
                        <td><input type="text" name="draft_isi" id="draft_isi" size="50"/></td>
                        <td><input type="text" name="harga_satuan" id="harga_satuan" size="8"/></td>
                        <td align="right"><input type="text" name="jumlah" id="jumlah" readonly="readonly"/></td>
                        <td><button type="button" class="deleteRow">Del</button></td>
                    </tr>
                    <tfoot>
                    <tr>
                        <td>&nbsp;</td>
                        <td align="right">&nbsp;</td>
                        <td align="right">&nbsp;</td>
                        <td align="right" valign="middle">Grand Total : </td>
                        <td><input name="grandtotal" type="text" id="grandtotal" readonly="readonly"/></td>
                        <td align="right">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="right">&nbsp;</td>
                      <td align="right">&nbsp;</td>
                      <td align="right">&nbsp;</td>
                      <td align="right" valign="middle">Bayar : </td>
                      <td><input name="bayar" type="text" id="bayar" /></td>
                      <td align="right">&nbsp;</td>
                  </tr>
                    <tr>
                      <td align="right"></td>
                      <td align="right">&nbsp;</td>
                      <td align="right">&nbsp;</td>
                      <td align="right" valign="middle">Sisa : </td>
                      <td><input name="sisa" type="text" id="sisa"readonly="readonly"/></td>
                      <td align="right">&nbsp;</td>
                  </tr>
                  </tfoot>
                </table>

HTML

{{1}}

您可以在JSFIDDLE

看到代码

请帮我解决如何使用php首先克隆/添加动态下拉列表。

需要帮助

谢谢

Answer 1

使用jquery函数.clone()然后在insertAfter() - 或appendTo()父DOM元素select.clone().appendTo(select.parent()); JSFiddle 之后插入 - 您可以复制/粘贴下拉列表，如JSFiddle

所示

＆＃13;

var select = $('.test');
$('#btn1').on('click', function () {
	select.clone().insertAfter(select);
});

＆＃13;

#btn1 {
    display:block;
    margin-bottom:10px;
}
.test{
    display:block;
    margin-bottom:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btn1">Duplicate</button>
<select class="test">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
</select>

＆＃13;

<强>更新检查此PHP Fiddle，它会演示与您的问题类似的内容，这是一个动态生成的下拉列表，可以从数据库查询或JSON响应中获取。

但是，如果要复制整个文本输入集以及动态生成的下拉列表，请检查此PHP Fiddle 2，其中显示了如何首先获取容器div的内部html然后追加额外的输入和选择。

更新2： 发表评论

要为每个下拉列表指定唯一的id，请为第一个动态生成的下拉列表提供使用此js代码的ID：

var html = $('#container').html(),
    id = $('.test').first().attr('id');
    id = id.replace(/drop/, '');
$('#btn1').on('click', function () {
    $('#container').append(html);
    id++;
    $('.test').last().attr('id', 'drop' + id);
});

与此PHP Fiddle 3一样，查看控制台日志以查看每个id

如何在php中添加动态下拉列表的动态行jquery

1 个答案: