為什么我的AJAX請求沒有從下拉菜單中獲取正確的值？

Question

我正在構建一個Web應用程序，該應用程序將使用依賴於三重關系的下拉菜單（請考慮“國家/地區”->“州/州”>“城市”），並允許用戶更改其詳細信息。

這是下拉結構的代碼段（請注意dropAccounts的默認選項的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 （城市）中檢索到的值不是dropProperties的值。

在profileID.php腳本中：

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

$propertyID的值從dropAccounts的默認選項作為'test'返回。 我仔細檢查了所有變量，但感到很困惑。 我想知道是否有經驗更豐富的人能找出問題所在？

提前致謝！

Answer 1

選項分為兩部分，值和顯示名稱。 您只設置顯示名稱。

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

另外，默認選擇空白選項也不是一個好主意，因為您可能想通過Ajax調用來設置所選選項，對嗎？ 實際上，為什么不讓Ajax在選擇正確的值的情況下再次返回整個下拉列表（所有選項），而不是僅返回一個選項？

Answer 2

看起來問題在於您正在使用類選擇器，這意味着您可能返回了多個元素，在這種情況下，我不確定.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 。