为什么我的 AJAX 请求没有从下拉菜单中获得正确的值？

Question

我正在构建一个 Web 应用程序，该应用程序将利用三重相关下拉菜单（想想国家 -> 州 -> 城市）并允许用户更改他们的详细信息。

这里是下拉结构的代码sn-p（注意dropAccounts的默认选项的值是'test'）：

        //create a drop down of available accounts
        echo 'Available Accounts: ';

        echo '<select name="dropAccounts" class="dropAccounts">';
        //if there is at least one account available
        if (count($accsAvailable) > 0) {
            echo '<option value="test">---Select an account---</option>'; //default option
            foreach ($accsAvailable as $account) {
                //populate from API
                echo '<option value=' . $account->getId(). '>' . $account->getName() . '</option>';
            }
        } else {
            echo '<option value="0">---No accounts available---</option>'; //else if no accounts exist
        }
        echo '</select>';

        //for available webproperties
        echo '<br> Available Webproperties: ';
        echo '<select name="dropProperties" class="dropProperties" id="dropProperties">';
        echo '<option selected="selected">---Select a webproperty---</option>';
        echo '</select>';

        //for available profiles
        echo '<br> Available Profiles: ';
        echo '<select name="dropProfiles" class="dropProfiles" id="dropProfiles">';
        echo '<option selected="selected">---Select a profile---</option>';
        echo '</select>';

我正在使用 onchange 事件和 AJAX 从第一个下拉菜单 dropAccounts（国家/地区）中提取值，并使用该值来索引 API 调用以填充第二个下拉菜单， dropProperties（状态）如下：

$(".dropAccounts").change(function()
{
       var accountID = $(".dropAccounts").val(); //gets the account ID from drop-down value
       populateProperties(accountID);
});

function populateProperties(accountID) {
                $.ajax
                ({
                    type: "POST",
                    url: "propertyID.php",
                    data: {
                        'accountID' : accountID
                    },
                    cache: false,
                    success: function(html)
                    {
                        $(".dropProperties").html(html);

                        // Populate profiles after properties load
                        populateProfiles($(".dropProperties").val());
                    } 
                });
            }

AJAX 请求替换 dropProperties（状态）下拉列表的内容，然后调用 populateProfiles() 函数以类似方式填充最终下拉列表 dropProfiles（城市）：

        function populateProfiles(propertyID) {
            $.ajax
            ({
                type: "POST",
                url: "profileID.php",
                data: {
                    'propertyID' : propertyID
                },
                cache: false,
                success: function(html)
                {
                    $(".dropProfiles").html(html);
                } 
            });
        }

此方法可以正常使用正确的dropAccounts（国家/地区）和dropProperties 填充前两个下拉列表，但是在第三个下拉列表dropProfiles（城市）中检索到的值不是来自@ 的值987654336@.

在 profileID.php 脚本中：

<?php
$propertyID = $_POST['propertyID'];
echo '<option> Property ID: ' . $propertyID . '</option>';
?>

$propertyID 的值从 dropAccounts 的默认选项返回为 'test'。我已经仔细检查了所有变量，我很困惑。我想知道是否有经验更丰富的人可以找出问题所在？

提前致谢！

Answer 1

看起来问题在于您正在使用类选择器，这意味着您可能会返回多个元素，在这种情况下，我不确定 .val() 将如何处理一组元素。

您还应该通过获取所选选项的值来获取值。

尝试像这样使用它......

var accountID = $(".dropAccounts").first().find('option:selected').val();

编辑

我们需要一种更好的方法来选择您尝试为其获取价值的元素，因此我认为您最好的选择是使用我们可以用来选择它的东西来修改元素，并确保没有其他东西会进入路。

修改这一行echo '<select name="dropAccounts" class="dropAccounts">';

我建议在这个页面上添加一个唯一的 ID，这样我们就可以准确地使用 jQuery 来确保我们只选择这个元素。

echo '<select name="dropAccounts" class="dropAccounts" id='someuniqueid'>';

然后有了jQuery，获取值会容易很多...

var accountID = $("#someuniqueid > option:selected").val() // 语法错误已修复

所以基本上这就是告诉 jQuery 获取 ID 为 someuniqueid 的元素，这是您的选择元素，然后它将获取该选择元素的 selected option。

Answer 2

选项有两部分，值和显示名称。您只是在设置显示名称。

<?php
$propertyID = $_POST['propertyID'];
echo "<option value='" . $propertyID . "'> Property ID: " . $propertyID . '</option>';
?>

默认选择空白选项也不是一个好主意，因为您可能想通过 Ajax 调用设置选定的选项，对吧？事实上，为什么不让 Ajax 再次返回整个下拉列表（所有选项）并选择正确的值，而不是只返回一个选项？