Question

我在尝试自动填充多个文本字段以及下拉列表时出现问题...此UI从数据库中提取数据以进行自动填充...实际上，当我单击+按钮添加其他内容时会出现问题textfield和下拉列表...对于第一个文本字段和下拉列表我正在自动填充，但是当我尝试第二行时我遇到问题...请更正我的错误

`

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

`

Answer 1

单击“添加”时，您将创建与现有元素具有相同ID的元素，因此这将失败。为您创建的元素添加唯一ID。

如果您要提交，或者将它们添加为数组

，您还需要唯一的名称

我也更改了你的删除ID并更改了类：

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

我不确定自动完成是如何工作的，但我认为你必须给你的选择并输入一个类（就像我已经完成的那样）并循环遍历它们，获取id并调用你的ajax

Answer 2

这是因为您在加载时绑定了自动完成功能。因此，您创建的新项目不会与ui代码绑定。

您应该使用自动填充功能绑定您创建的新项目。就像你在加载时那样。

您可以绑定一个函数并在加载时调用它，并在创建项目后调用它。喜欢，

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');
                        }
                    });
                }
            });
}

然后在你的负载

jQuery(document).ready(function() {
            bindAutoComplete($('#property_id')[0]);

});

并在您的添加项目方法

中

$('#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);


            });

警告，这段代码看起来很乱，但为了让你明白绑定，这应该可行。

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

2 个答案: