我遇到了一个部分是借来的,部分是我自己的脚本的问题,是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);
});
});
});