Question

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

    <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

有两个问题。

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

这将使您的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中的转义字符，因此需要将其双斜杠。

适用于PHP，但不适用于脚本

1 个答案: