Javascript 为包含数据库数据的下拉框添加输入字段按钮

Javascript 为包含数据库数据的下拉框添加输入字段按钮,javascript,php,jquery,Javascript,Php,Jquery,所以我有这个“添加输入字段按钮”代码 <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 b

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

<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>

$(文档).ready(函数(){
var max_fields=25;//允许的最大输入框数
var wrapper=$(“.input_fields_wrapp”);//字段包装器
var add_button=$(“.add_字段_button”);//添加按钮ID
var x=1;//初始文本框计数
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x
此代码将添加输入字段,也可以删除它。但是现在我想添加一个下拉框,其中包含来自数据库的数据。我已经使用此代码创建了下拉框

    <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> 
Daerah
现在,我已经将此代码与上面的代码组合在一起,但是“添加字段”按钮不起作用,有人可以帮忙吗

这就是我组合这两个代码的方式,只需将代码下拉框插入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>

$(文档).ready(函数(){
var max_fields=25;//允许的最大输入框数
var wrapper=$(“.input_fields_wrapp”);//字段包装器
var add_button=$(“.add_字段_button”);//添加按钮ID
var x=1;//初始文本框计数
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x
编辑-------


$(文档).ready(函数(){
var max_fields=25;//允许的最大输入框数
var wrapper=$(“.input_fields_wrapp”);//字段包装器
var add_button=$(“.add_字段_button”);//添加按钮ID
var x=1;//初始文本框计数
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x
我认为您遇到的主要问题与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
$(包装器).append('No.Telefon'+
''+
''+
''); //添加输入框

显示相关代码可能会有所帮助。我们不知道您是如何修改click()事件来添加下拉列表的,也不知道您是如何通过JavaScript操作PHP生成的HTML等。请参阅edit@halfnibble问题的一部分可能是您回显了单引号(),但使用单引号将字符串封装在JavaScript($(包装器)。append(“…”)中.那么解决办法是将单引号改为双引号@好吧,比那复杂一点。只要转义,就可以使用单引号。我将创建一个带有示例格式的答案。是的,它在引号中。PHP处理器完全忽略标记之外发生的事情。你自己测试一下。”\“'\”当您需要将JavaScript变量分配给PHP字符串常量时,这个事实非常方便。var php_var='';这让我觉得JavaScript已损坏,因此无法阻止默认的onclick事件(这是这里唯一可能导致页面刷新的事件)。代码是否存在于某个地方?或者您可以导出生成的HTML吗?你的浏览器有JavaScript错误控制台吗?首先,你在$(wrapper)后面缺少一个分号。在(…)上,哦,我之前没有找到。您不需要以/>结束初始的select标记。这表示select元素的结束。第一个select标记应仅以>结尾。例如:…选项等。。
$(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