Question

我正在尝试制作3个表单字段（由.php脚本和2个文本字段动态填充的下拉列表），还有一个按钮再添加3个和3个以上等等（当用户单击按钮时）我尝试了几种方法，但似乎没有什么对我有用。（我是JS，AJAX，jQuery中的noob，所以我主要尝试在互联网上找到的脚本）。以下是这些表单字段的代码：

<form id="form1" name="form1" method="post" action="results.php">
 <div id="itemRows">
    <select name="species">
            <option value="">Select Species</option>';
            <?php $sql = "SELECT common FROM species";
            $speciesq = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($speciesq))
{
    echo "<option value=\"" . $row['common'] ."\">" . $row['common'] ."</option>";
}
?> 
</select>
    Number: <input type="text" name="speciesnumber1" size="7" /> Weight: <input type="text" name="speciesweight1" /> <input onClick="addRow(this.form);" type="button" value="+" />     
    </div></form>

在此表单后面有代码：

<script type="text/javascript">
var rowNum = 0;
var ddsel = '<select name="species'+rowNum+'>';
var ddopt = '<option value="">Select Species</option>';
var ddselc= '</select>';
function addRow(frm) {
    rowNum ++;
    $.post("getlist.php", function(data) {
        for (var i=0; i<data.length; i++) {
            ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>';
        } 
    }, "json");
    var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}
</script>

getlist.php是一个简单的脚本，用于填充下拉列表并发送数据：

<?php
include("dbcon.php");
$sql = mysqli_query ($con, "SELECT common FROM species");
$result = array();
while ($row = mysqli_fetch_array($sql)){
    $result[] = array(
    'value' => $row['common'],
    );
}
echo json_encode($result);
?>

所以当我点击“+”按钮（添加行）时没有任何反应。

已解决：对于那些来这里的人，请阅读答案下方的评论。

Answer 1

你只是在错误的地方有一些代码：

var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';

需要将

移动到post return函数中，如下所示：

function addRow(frm) {
    rowNum ++;
    $.post("getlist.php", function(data) {
        var frm = document.getElementById('form1');
        for (var i=0; i<data.length; i++) {
            ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>';
        } 
        var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }, "json");
}

使用php添加表单字段动态填充的下拉列表

已解决：对于那些来这里的人，请阅读答案下方的评论。

1 个答案: