Fatal编程技术网
  • php/
  • Php 自动填充多个文本字段和下拉列表

Php 自动填充多个文本字段和下拉列表

php jquery

Php 自动填充多个文本字段和下拉列表,php,jquery,Php,Jquery,我有一个问题，当我试图自动填充多个文本字段以及下拉列表。。。此UI从数据库获取数据以自动填充。。。事实上，当我点击+按钮查看额外的文本字段和下拉列表时，问题就出现了。。。对于第一个文本字段和下拉列表，我得到了正确的自动填充，但当我尝试第二行时，我遇到了问题。。。请纠正我的错误 </title> <link rel="stylesheet" type="text/css" href="jquery-ui.css"/> <link rel="s

我有一个问题，当我试图自动填充多个文本字段以及下拉列表。。。此UI从数据库获取数据以自动填充。。。事实上，当我点击+按钮查看额外的文本字段和下拉列表时，问题就出现了。。。对于第一个文本字段和下拉列表，我得到了正确的自动填充，但当我尝试第二行时，我遇到了问题。。。请纠正我的错误

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>
` 

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>


$（文档）.ready（函数（）{
$（'#add1'）。单击（函数（）{
$（“#框”）。追加(
$（'\n\
\n\
\n\

")
);
});
$（'body'）。在（'click'，'#remove'，function（）上{
$（this.parent（'div'）.remove（）；
});
});
jQuery（文档）.ready（函数（）{
$（'#属性_id'）。自动完成({
来源：“unit.php”，
最小长度：1，
选择：功能（evt、ui）
{
$.ajax({
url:“property.php”，
数据：{propertyid:ui.item.property\u id}，
数据类型：“json”，
键入：“POST”，
成功：功能（数据）{
var pname=ui.item.value；
log（“组合数据==”，pname，data）；
$（'select[name=“unit_id”]”）。空（）；
$（'select[name=“unit_id”]”）。追加（$（''）.text（“select”）；
对于（变量i=0；i
`

单击“添加”时，您正在创建与现有元素具有相同id的元素，因此此操作将失败。为您创建的元素指定一个唯一的id

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>
如果要提交，还需要唯一的名称，或者将其添加为数组

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>
我还更改了您的删除id并更改了类：

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>

<script type="text/javascript">

 $(document).ready(function() {

        var i = 0;

        $('#add1').click(function() {


            $("#box").append(


                $('<div><input type="text" class="property_input" name="property_id[]" id="property_id' + i + '"/>\n\
                        <select disabled="" class="unit_select" name="unit_id[]" id="unit_id' + i + '">\n\
                                <option></option>\n\
                        </select><img src="remove.png" width="20" height="20" border="0" align="top" class="remove" /><br></div>')



                    );

            i++;

        });



        $('body').on('click', '.remove', function() {

            $(this).parent('div').remove();
            i--;

        });


    });

</script>


$（文档）.ready（函数（）{
var i=0；
$（'#add1'）。单击（函数（）{
$（“#框”）。追加(
$（'\n\
\n\
\n\

")
);
i++；
});
$（'body'）。在（'click'，'remove'，function（）上{
$（this.parent（'div'）.remove（）；
我--；
});
});
我不确定autocomplete是如何工作的，但我认为您必须给您的select和inputs一个类（正如我所做的那样），并在它们之间循环，获取id并调用ajax，这是因为您在加载时绑定了autocomplete。因此，您创建的新项将不会与ui代码绑定

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>
您应该将创建的新项与自动完成绑定。就像你装的一样

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>
您可以使绑定成为一个函数，并在加载和创建项后调用它。像

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>

var bindAutoComplete = function(elem) {
    $(elem).autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
}
在additem方法中

    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>

$('#add1').click(function() {

var newItem = $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>');

bindAutoComplete(newItem.find("#property_id")[0]);

                $("#box").append(newItem);


            });

$（'#add1'）。单击（函数（）{
var newItem=$（'\n\
\n\
\n\

"),；
bindAutoComplete（newItem.find（“#属性_id”）[0]）；
$（“#框”）。追加（新项目）；
});
警告，此代码看起来很混乱，但为了让您了解绑定的概念，此方法应该可以工作。

为什么要使用$（紧跟在append（）方法之后？它将作为变量处理…@Ananth这意味着您解决了问题？还是需要更多帮助？ 
    </title>

    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-1.11.0.min.js"></script>

    <script src="jquery-ui.js"></script>

    <script type="text/javascript">

     $(document).ready(function() {

            $('#add1').click(function() {



                $("#box").append(
                        $('<div><input type="text" name="property_id" id="property_id"/>\n\
                            <select disabled="" name="unit_id" id="unit_id">\n\
                                    <option></option>\n\
                            </select><img src="remove.png" width="20" height="20" border="0" align="top" class="add1" id="remove" /><br></div>')



                        );


            });



            $('body').on('click', '#remove', function() {

                $(this).parent('div').remove();


            });


        });

    </script>
    <script type="text/javascript">







        jQuery(document).ready(function() {
            $('#property_id').autocomplete({
                source: 'unit.php',
                minLength: 1,
                select: function(evt, ui)
                {
                    $.ajax({
                        url: "property.php",
                        data: {propertyid: ui.item.property_id},
                        dataType: 'json',
                        type: 'POST',
                        success: function(data) {
                            var pname = ui.item.value;
                            console.log("combo data === ", pname, data);
                            $('select[name="unit_id"]').empty();
                            $('select[name="unit_id"]').append($('<option>').text("Select"));
                            for (var i = 0; i < data.length; i++) {
                                $('select[name="unit_id"]').append(
                                        $('<option>', {value: data[i]["unit_id"]}).text(data[i]["unit_id"])
                                        );
                            }
                            $('select[name="unit_id"]').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div id="box">
    <input type="text" name="property_id" id="property_id"/>
    <select disabled="" name="unit_id" id="unit_id">
        <option></option>
    </select>
    <img src="add.png" width="20" height="20" border="0" align="top" class="add" id="add1" /><br>
    </div>
</body>