为带有数据库中数据的下拉框添加输入字段按钮

Question

所以我有这个“添加输入字段按钮”代码

<script>
$(document).ready(function() {
    var max_fields      = 25; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initial text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><label for="NoTelefon[]">No.Telefon</label><input type="text" name="NoTelefon[]" id="NoTelefon[]" class="required input_field"><a href="#"class="remove_field">Batal</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

</script>

此代码将添加输入字段，也可以将其删除。 但是现在我想添加一个下拉框，其中包含来自数据库的数据。 我已经使用此代码创建了下拉框

    <label for="KodDaerah">Daerah</label>
                    <?php
                    include('dbase.php');
$sql    = "SELECT KodDaerah, NamaDaerah FROM koddaerah";
                    $result = mysql_query($sql);
                    echo "<select name='KodDaerah' id='KodDaerah' class='input_field' required /><option></option>";
                    while($kod = mysql_fetch_array($result)){
                    echo "<option value=".$kod['KodDaerah'].">" .$kod['NamaDaerah']."</OPTION>";
                    }
                    echo "</select>";
                    ?>  
                    <div class="cleaner_h10"></div> 

现在，我已经将此代码与上面的代码结合起来了，但是添加字段按钮不起作用，有人可以帮忙吗？

这就是我结合这两个代码的方式，只需将下拉框代码插入arapper.append

<script>
$(document).ready(function() {
    var max_fields      = 25; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initial text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><label for="NoTelefon[]">No.Telefon</label><input type="text" name="NoTelefon[]" id="NoTelefon[]" class="required input_field"> <?php $sql  = "SELECT KodLokasi, NamaLokasi FROM kodlokasi";$result = mysql_query($sql);echo "<select name='KodLokasi[]' id='KodLokasi[]' class='input_field' required /><option></option>";while($kod = mysql_fetch_array($result)){echo "<option value=".$kod['KodLokasi'].">" .$kod['NamaLokasi']."</OPTION>";}echo "</select>";?><a href="#"class="remove_field">Batal</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

</script>

编辑 - - - -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    var max_fields      = 25; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initial text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div> <input type="text" name="NoTelefon[]" id="NoTelefon[]" class="required input_field">'+
                                '<?php
                                $sql  = "SELECT KodLokasi, NamaLokasi FROM kodlokasi";
                                $result = mysql_query($sql);
                                echo "<select name=\'KodLokasi[]\' id=\'KodLokasi[]\' class=\'input_field\' required /><option></option>";
                                while($kod = mysql_fetch_array($result)){
                                echo "<option value=".$kod['KodLokasi'].">" .$kod['NamaLokasi']. "</OPTION>";
                                }
                                echo "</select>";
                                ?>'+

                                '<a href="#" class="remove_field">Batal</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });
});

</script>

Answer 1

我相信您遇到的主要问题与PHP在JavaScript字符串中放置非转义的单引号有关（用单引号引起来）。

注意：在PHP中用于数据库查询的方法通常被认为已弃用，但如果您的PHP版本仅支持功能查询，则在此将其保留在此处。

这是一个如何编写click（）事件附加函数的示例：

$(wrapper).append('<div><label for="NoTelefon[]">No.Telefon</label>'+
    '<input type="text" name="NoTelefon[]" id="NoTelefon[]" class="required input_field">'+
    '<?php
        $sql  = "SELECT KodLokasi, NamaLokasi FROM kodlokasi";
        $result = mysql_query($sql);
        echo "<select name=\'KodLokasi[]\' id=\'KodLokasi[]\' class=\'input_field\' required /><option></option>";
        while($kod = mysql_fetch_array($result)){
            echo "<option value=\'".$kod['KodLokasi']."\'>" .$kod['NamaLokasi']. "</OPTION>";
        }
        echo "</select>";
    ?>'+
    '<a href="#" class="remove_field">Batal</a></div>'); //add input box