php - 使用 javascript 选择表单

Question

我想获得具有可变数量字段的选择表单。为了实现这一点，我首先连接到 db 并将数据从 php 转换为 javascript。然后我得到了带有值的数组（wynik），但是当我尝试打印它时，我得到空的选择表单和它旁边显示的所有值。有我的javascript函数：

<script language="javascript">
function addInput() {
document.getElementById('text').innerHTML += "<select name='add' /><br />";
for (i=0;i<wynik.length;i++)
{
document.getElementById('text').innerHTML += "<option value=" + "wynik[i]" + " />" + wynik[i] + "</option />";
}
document.getElementById('text').innerHTML += "</select />";
}
</script>

和 HTML 代码：

<form name="add" action="add_form.php" method="post">
<div id="text">
</div>
<br>
<input type="submit" value="Submit" />
</form>
<input type="button" onclick="addInput()" name="add" value="Add value" />

请帮我把它变成形式。

Answer 1

每次您向 DOM 写入 HTML 时，浏览器都会尝试修复 DOM，因此您不能只向innerHTML.

将所有 HTML 构建成一个字符串，然后一次性插入。

更好的是，使用createElement,appendChild和朋友来代替。

Answer 2

也许您需要<br />在<select name='add' />. </select />最后也不需要 / （它在开头就有）- </select>。

Answer 3

您可以尝试使用 ajax 的另一种方法：

<!-- Script -->
<script type="text/javascript">
$(function(){
    $("#add").on('click', function(){
       $.ajax({
            url     : 'ajax.php',
            type    : 'POST',
            success : function(resp){
                $("#backend").html(resp);
            },
            error   : function(resp){

            }
       }); 
    });
});
</script>
<!-- HTML -->
<div id="text"><select id="backend" name=""></select></div>
<input type="button" id="add" value="Add value" />

<!-- Backend ajax.php -->
<?php
#your query here to fetch $wynik
$str    = "";
foreach($wynik as $value){
    $str    .= '<option value="'.$value.'">'.$value.'</option>';
}
return $str;