Ajax填充下拉菜单，只需单击两次

Jacob 发表于 Dev

雅各布

我的网页是我公司的内部数据库移动工具。我有一节针对源和目标。

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

    $("#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!")
        });

我的问题是，您必须单击一次下拉列表（没有任何显示），取消选择它，然后再次单击它以查看填充的值。这是有道理的，将其视为点击即可生成数据，因此我需要重新选择下拉菜单以查看新数据。

有没有办法使所有这些操作都在第一次点击时发生？

谢谢！

蒂普·扎恩·苏丹

还有另一种更有效的方法可以实现此目的：

$("#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.