javascript/php获胜't加载依赖下拉列表中第一个选项的数据

javascript/php won't load data for first option in dependent dropdown

本文关键字：下拉列表 依赖 第一个 选项 数据 加载 php 获胜 javascript      更新时间：2023-09-26

我遇到了一个部分是借来的，部分是我自己的脚本的问题，是javascript和php填充了两个下拉列表，第二个列表中的选项取决于用户在第一个列表中选择的内容。出于某种原因，当在第一个下拉列表中选择初始选项时，无论是在页面加载时还是手动选择时，它都不会加载第二个下拉列表的选项（如果选项是"a、b、c、d、e…etc"，它不会为"a"加载任何内容）。

我认为这可能与javascript文档就绪功能有关，但恐怕我对javascript知之甚少。这是javascript代码：

        $(document).ready(function () {
    $.getJSON("getOutcome.php", success = function(data)
    {
        var options = "";
        for(var i = 0; i < data.length; i++)
        {
            options += "<option value ='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
        }
        $("#slctOutcome").append(options);
        $("#slctProxy").change();
    });
    $("#slctOutcome").change(function()
    {   
        $.getJSON("getProxies.php?outcome=" + $(this).val(), success = function(data)
    {
            var options = "";
            for(var i = 0; i < data.length; i++)
            {
                options += "<option value ='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
            }
            $("#slctProxy").html("");
            $("#slctProxy").append(options);
        });
    });
});

Change事件仅在更改选择时触发，而不是在填充时触发；-）

尝试在最后一行添加$("#slctOutcome").trigger("change");

玩得开心：-）

尝试以下操作。第一个函数中没有调用第二个函数。

 $(document).ready(function () {
$.getJSON("getOutcome.php", success = function(data)
{
    var options = "";
    for(var i = 0; i < data.length; i++)
    {
        options += "<option value ='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
    }
    $("#slctOutcome").append(options);
    $("#slctOutcome").change();  //<-Here
});
$("#slctOutcome").change(function()
{   
    $.getJSON("getProxies.php?outcome=" + $(this).val(), success = function(data)
{
        var options = "";
        for(var i = 0; i < data.length; i++)
        {
            options += "<option value ='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
        }
        $("#slctProxy").html("");
        $("#slctProxy").append(options);
    });
});

})；

相关文章：