适用于 PHP 但不适用于脚本

Question

this is the output

我有这个完美运行的代码。下拉字段包含选项。但是当我尝试使用“添加更多”按钮创建新行时，下拉菜单不起作用。请检查输出。

    <select name="name[]"/>
    <?php
    echo "<option SELECTED DISABLED>SELECT CUSTOMER</option>";
    while($result = mysqli_fetch_array($query1)){
    echo "<option value='$result[description]'>" . $result['description'] . "</option>";
    }
    ?>
    </select>/td>  
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> 

使用这样的脚本：

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><select name="name[]"/><?php echo "<option SELECTED DISABLED>SELECT CUSTOMER</option>"; while($result = mysqli_fetch_array($query1)){ echo "<option value='$result[description]'>" . $result['description'] . "</option>";}?></select></td>         <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      }); 

但#add 不会创建新的输入表单。我相信#dynamic_field 脚本有问题，我找不到它。谢谢你

Answer 1

有两个问题。

1. <option> 在<select> 之外呈现的原因是因为您使用了自动关闭的<select /> 标记。您需要从<select name="name[]" /> 中删除/。
2. 您将$query1 重复用于两个循环。如果不重置内部指针（结果对象内的指针，用于跟踪您请求的行），您将无法做到这一点。在开始第二个 while 循环之前，您可以在任何地方使用 mysqli_data_seek($query1, 0); 来做到这一点。

这将使您的 javascript 代码像这样（为了便于阅读，我将 PHP 代码分成多行）：

$(document).ready(function(){  
    var i=1;  
    $('#add').click(function(){  
        i++;  
        $('#dynamic_field').append('<tr id="row'+i+'"><td><select name="name[]"><?php
            echo "<option SELECTED DISABLED>SELECT CUSTOMER</option>";
            mysqli_data_seek($query1, 0);
            while($result = mysqli_fetch_array($query1)){
                echo "<option value=\\'$result[description]\\'>" . $result['description'] . "</option>";
            }
        ?></select></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
    })
});

编辑：更多关于问题1：

对于无效的 HTML 代码，浏览器非常宽容。他们看到您的自动关闭<select />，然后是<option> 和</select>，他们认为“哦，好吧，最初的<select /> 应该是<select> 然后”并正确呈现。但是，当您直接使用 Javascript 操作 DOM 时（在这种情况下，通过使用 jQuery 的 .append() 函数），所有错误纠正逻辑都将被跳过，您必须在第一次正确执行。

编辑 2：由于您对 .append('[...]') 使用单引号，因此您会与该字符串中的 <option value='[...]'> 发生冲突。 <option> 的单引号需要转义。由于\ 是 PHP 中的转义字符，因此您需要对它们进行双斜杠。