Question

我的网页是我公司的内部数据库移动工具。我有一个关于源和目标的部分。

我有主机和端口的单选按钮，以及数据库名称的下拉列表。当设置主机和端口时，我在下拉列表上有一个点击事件捕获，它向一个php页面发送ajax请求，该页面查询该实例上的数据库并填充下拉选项（这是针对目标下拉列表）：

    $("#targetDrop").one("click",function() {
    ajaxTarget();
     });


function ajaxTarget() {
    $.ajax({
        url: './dbLookup.php',
        type: 'POST',
        dataType: "json",
        data: {
            host: $("#targetHost:checked").val(),
            port: $("#targetPort:checked").val()
        }
    })
        .done(function(result) {
            console.log("Setting Result");
            for (i=0; i<result.length; i++) {
                $("#targetDrop").append("<option name=\"targetDB\" value=\"" + result[i] + "\">" + result[i] + "</option>");
            }
        })
        .fail(errorFn)
        .always(function (data,textStatus,jqXHR){
            console.log("The request is complete!")
        });

我的问题是，您必须单击下拉列表一次（没有显示），取消选择它，然后再次单击它以查看填充的值。这是有道理的，看到它点击生成数据，所以我需要重新选择下拉列表以查看新数据。

有没有办法让这一切都在第一次点击时发生？

谢谢！

Answer 1

还有另一种更有效的方法来实现这一目标：

$("#targetHost, #targetPort").change(function () {
    if ($.trim($("#targetHost:checked").val()) != "" && $.trim($("#targetPort:checked").val()) != "") {
        dbLookUp();
    }
});

function dbLookUp() {
    var data = {
            host: $("#targetHost:checked").val(),
            port: $("#targetPort:checked").val()
        }
    $.ajax({
        url: './dbLookup.php',
        type: 'POST',
        dataType: "json",
        data: data,
    }).done(function(response) {
        var opts = '<option value="">Choose Database...</option>';
        $.each(response, function(index, data) {
            opts += '<option name="targetDB" value="' + data + '">' + data + '</option>';
        });
        $("#targetDrop").html(opts);
    }).fail(function(response) {
        console.log(response);
    });
}

dbLookUp(); // Add this line if you have default selection for host and port
            // and you want to load the DB list as soon as the page loads up.

通过这种方式，您无需单击下拉列表即可将其加载...只要您选择主机和端口，它就会加载doropdown。您甚至可以在第一页加载时加载数据库列表。

希望这有帮助。

Ajax填充下拉两次点击

1 个答案: