Question

我正在构建一个Web应用程序，它将使用三重相关的下拉菜单（想想country-＆gt; state-＆gt; city）并允许用户更改其详细信息。

以下是下拉结构的代码段（请注意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调用以填充第二个drop - 向下菜单，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（city）类似的时尚：

        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的值从默认选项'test'返回dropAccounts。我仔细检查了所有变量，我很难过。我想知道有经验的人是否可以找出问题？

提前致谢！

Answer 1

选项包含两部分，值和显示名称。您只需设置显示名称。

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

默认选择空白选项也不是一个好主意，因为您可能想通过Ajax调用设置所选选项，对吧？实际上，为什么不让Ajax在选择了适当的值的情况下再次返回整个下拉列表（所有选项）而不是仅返回一个选项？

Answer 2

看起来问题是你正在使用类选择器意味着你可能会返回多个元素，在这种情况下，我不确定.val()如何对一组元素起作用。< / p>

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

尝试使用它......

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的元素，这是你的select元素，然后它将获取该select元素的selected option。

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

2 个答案:

修改