Question

所以，我目前正在学习如何使用jQuery/php而且我是一个完全的菜鸟，对不起我的错误，但我在这里...我有一个数据库，充满了产品，我也有一个模态（BootStrap4）允许你创建新的收据，这些收据有Client, Title, PRODUCTS，这些产品认为动态生成是个好主意，所以我做了

PHP：

<?php

// <option value="4" >Salsa</option>

if ( !isset($_SESSION['permission']) ) {
    session_start();
}

if ( !isset($conn) ) {
    include '../../dbh.php';
}

$sql = "SELECT * FROM products";

$results = mysqli_query($conn, $sql);

$data = "";

while ( $rowitem = mysqli_fetch_array($results) ) {

    $data .= '<option value="' . $rowitem['id'] . '" >' . "[" . $rowitem['model'] . "] " . $rowitem['brand'] . " " . $rowitem['name'] . '</option>';
}

$data = strip_tags($data, '<option>');

echo $data;

这会插入：

<table class="table" id="dynamicField">
                            <tr id="row1">
                                <td>
                                    <select class="" id="row1data" name="product[]" required>
                                        <?php include 'ProductOptions.php';?>
                                    </select>
                                </td>
                                <td><input type="number" class="form-control" name="amount[]" required></td>
                                <td><input type="button" value="Add" name="add" id="add" class="btn btn-success"></td>
                            </tr>

现在，每次按下小＆＃34;新项目＆＃34;按钮，它运行这个 jQuery代码

$('#add').click(function() {
        i++
        $.ajax ( {
            url: 'includes/productMovement/Receipt/ProductOptions.php',
            dataType: 'html',
            success: function(php){
                $('#dynamicField').append('<tr id="row' + i + '"><td><select class="form-control" data-size="5" data-live-search="true" name="sel[]"><option value="1" >' + php + '</select></td><td><input type="number" class="form-control" name="amount[]" required></td><td><input type="button" value="Remove" name="add" id="' + i + '" class="btn btn-remove btn-danger"></td></tr>');
            }
        })
    })

注意：该课程为selectpicker，以及选择输入的方式采取形状

这一切都完美无缺，一个问题......选择框全部是f @＃3d，它甚至不会显示项目......我尝试了几个插件并得出结论，它不是插件的错，我不知道如何动态生成内容。我会喜欢任何帮助，在任何地方都找不到答案，而且我有点绝望，因为我现在已经试着弄清楚了4个小时......

Answer 1

You need to initialize the new drop down with .selectpicker() function via js inside your ajax success function.

$('#row'+i+' > td > select').selectpicker();

your click function will look like this

$('#add').on('click',function() {
        i++
        $.ajax ( {
            url: 'includes/productMovement/Receipt/ProductOptions.php',
            dataType: 'html',
            success: function(php){
                $('#dynamicField').append('<tr id="row' + i + '"><td><select class="form-control" data-size="5" data-live-search="true" name="sel[]"><option value="1" >' + php + '</select></td><td><input type="number" class="form-control" name="amount[]" required></td><td><input type="button" value="Remove" name="add" id="' + i + '" class="btn btn-remove btn-danger"></td></tr>');
                $('#row'+i+' > td > select').selectpicker();
            }
        })
    })

Answer 2

我回到这篇文章，因为我找到了一个更实用的解决方案，对于那些试图做我正在做的事情的人，如果你有动态生成的东西，无论你想要做什么来更新元素＆＃ 39; s脚本（在这种情况下）：

1）所有这些bootstrap-select选择器都有一个＆＃34; SelectPicker＆＃34;类，所以我必须实际做的是更新它：

$('#add').on('click',function() {
        i++
        $.ajax ( {
            url: 'includes/productMovement/Receipt/ProductOptions.php',
            dataType: 'html',
            success: function(php){
                $('#dynamicField').append('<tr id="row' + i + '"><td><select class="form-control" data-size="5" data-live-search="true" name="sel[]"><option value="1" >' + php + '</select></td><td><input type="number" class="form-control" name="amount[]" required></td><td><input type="button" value="Remove" name="add" id="' + i + '" class="btn btn-remove btn-danger"></td></tr>');
                // We update ALL selectpickers, so that we don't have to
                // navigate the DOM :)
                $('.selectpicker').selectpicker();
            }
        })
    })

当我尝试动态生成它时，jQuery插件（bootstrap-select）会中断

2 个答案: