Question

出于某些原因（朝向更大的图片），我有一个由php页面填充的select元素。数据在元素中正确填充。但是，当我进行选择时，元素始终强制列表中的第一个项目。如果我“追加”返回的数据，我可以选择不同的项目，但如果再次点击它将继续附加在现有项目的顶部。如果我在“追加”之前“清空”它会显示正确的列表，但仍会强制列表中的第一项，无论我使用onclick还是onchange，都会发生这种情况。无论代码如何工作，都需要同样应用于稍后在同一页面上动态创建的元素。据我所知，$（文件）.on（'点击'...而不是$（文件）.click（...更适合动态元素。感谢任何帮助。谢谢，我还是新来的交换，我希望我正确地描述了我的问题。我已经搜索了几个小时关于这个问题，但我主要得到关于多个选择元素的结果或填充第二个选择，甚至我尝试的潜在答案都不起作用。

我的数据来自_get_staffnames.php，让我们说它显示了弗兰克，乔治，托德。

    $stmt = $myPDO->prepare( "SELECT userID, CONCAT(firstname,' ', lastname) AS Fullname FROM tbl_user ORDER BY Fullname ASC" );
    $stmt->execute();
    $results = $stmt->fetchAll();   

    foreach ($results as $row): 
        echo '<option value="' . $row['userID'] . '">' . $row['Fullname'] . '</option>';
    endforeach

我的HTML是：

    <select name="userID1" id="userID1" class="namesClass" required>
        <option selected value="">Select Staff</option>
    </select>

我尝试过的一种JQuery方式，特别是对于一个元素id“userID1”，填充了Frank，George，Todd ......但是当我下拉并单击Todd时，它仍然显示单击后Frank（列表中的第一个）。

    $("#userID1").click(function() {
        $("#userID1").load("_get_staffnames.php");
    });

更多关注我的动态方式。这段代码允许我选择Frank，George或Todd并保留选择，但是如果我再次单击给定的动态元素，则每次单击时列表都会重复组+1。

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: '_get_staffnames.php',
            })
            .done(function (returndata) {
                $('#' + select_id).append(returndata);
            })
    });

当我在下面追加之前尝试.empty参数时，我得到正确填充的列表（没有多个附加组），但是当我选择任何项目时，它总是默认为列表中的第一个项目（Frank）。

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: '_get_staffnames.php',
            })
            .done(function (returndata) {
                $('#' + select_id).empty().append(returndata);
            })
    });

Answer 1

单击Select元素是否可以从远程源加载数据？

这完全是非常规的，通过这样做，每次点击任何项目时都会触发onclick事件并执行ajax方法，最终会在每次回调时重新创建其子元素。因此，第一个项目被选为默认项目。

Answer 2

正如kolunar指出的那样，即使我点击我的选择，我再次运行ajax。所以，我只是在运行ajax之前检查元素中是否有任何内容并且它可以工作。现在感觉很傻，但感谢时间和投入。

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");

        if ( $('#' + select_id).val() == '' ) {
            $.ajax({
                type: "POST",
                url: '_get_staffnames.php',
                })
                .done(function (returndata) {
                    $('#' + select_id).empty().append(returndata);
                })
        }
    });

PHP - PDO - JQuery动态选择元素只允许选择第一个选项

2 个答案: