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

【问题标题】：PHP - PDO - JQuery dynamic select element only allows the first option to be selectedPHP - PDO - JQuery 动态选择元素只允许选择第一个选项
【发布时间】：2015-11-25 04:21:29
【问题描述】：

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

我的数据是从 _get_staffnames.php 中提取的，假设它显示了 Frank、George、Todd。

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

当我在 append 之前尝试 .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);
            })
    });

【问题讨论】：

不确定我是否按照您的意愿行事。所以你在选择中点击一个名字，然后再用ajax追加列表？您没有使用 ajax 发送任何数据。您是否尝试过滤结果？可以展示和示例或创建一个jsFiddle 示例来说明您正在尝试做的事情吗？
基本上，我希望我的选择元素允许我选择任何项目，然后显示我选择了该项目。该元素已填充，但是当我单击一个项目然后关闭时，它只是默认为第一个项目。我还没有做过jsFiddle的例子，所以对这个过程不熟悉。

标签： php jquery pdo

【解决方案1】：

点击Select 元素是您从远程源加载数据的唯一方法吗？

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

【讨论】：

谢谢，你完全正确，我想我需要暂时离开它。我通过在运行 AJAX 之前检查元素中是否包含任何内容来修复它。我创建了一个连续表单，其中选择元素是用户在添加新行时动态添加的，我需要一种方法来填充它以及在文档加载后添加的任何其他元素。这现在有效，但我愿意接受任何建议。

【解决方案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);
                })
        }
    });

【讨论】：