【问题标题】:Populate Dropdown List based on Autocomplete Value根据自动完成值填充下拉列表
【发布时间】:2014-09-02 10:48:45
【问题描述】:

我有国家(文本输入)、城市(文本输入)和街道(下拉)三个表单字段:

  • 国家是自动完成的
  • 城市会根据国家/地区的结果自动填充
  • 街道我想根据所选城市生成下拉列表

这是我当前的 JavaScript 脚本:

$(".country").autocomplete("get_city.php",{ mustMatch:true })   
  .result(function (evt, data, formatted) {
    $(".city").val(data[1]);
});  

到目前为止,它正在自动填充城市(文本输入)。

我现在的问题是根据填充的城市生成下拉列表。

【问题讨论】:

  • 你有街道名称吗?如果没有,您打算如何获得它们?
  • 我有一个街道数据库,我正在考虑添加另一个查询,但我不知道从哪里开始。
  • 在您使用该城市的值设置城市后立即查询该数据库 (data[1]
  • 你能告诉我怎么做吗?我是一个使用 javascript 的完整菜鸟。
  • 如果可能的话,可以使用 php,因为它是用来生成 HTML 的。然后对于每个项目,我们可以循环回显下拉列表中的每个元素。

标签: javascript php jquery drop-down-menu autocomplete


【解决方案1】:

我认为你需要这样的东西:

$(".country").change(function () {

    var webMethod = "filewithdata.php";
    var parameters = { id: $('.country').val() };
    $.ajax({
        type: "GET",
        url: webMethod,
        data: parameters,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {

            //console.log(response);

            json_obj = $.parseJSON(response);

            var output = '';

            for (var i in json_obj) {
                if (json_obj[i][4] == 1) {

                    output += '<option value="' + json_obj[i][0] + '">' + json_obj[i][0] + '</option>'
                }

            }

            $('#dropdownElement').empty().append(output);

        },
        error: function (e) {
            $(divToBeWorkedOn).html("Unavailable");
            alert("Errror:" + e);
        }
    });

});

【讨论】:

  • 我应该使用 json 回显查询结果吗?请在 php 方面提供一些详细信息。谢谢
  • 是的,只需取消注释行 //console.log(response);您会在响应变量中收到答案。并在浏览器的控制台(F12,控制台)上查看其内容
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-18
  • 2014-03-20
  • 2019-07-28
  • 2012-10-31
  • 1970-01-01
  • 2013-07-10
相关资源
最近更新 更多