如何使用Ajax和php填充可靠的下拉列表

嗨，我想使用Ajax管理下拉菜单上的数据

数据库字段：

1.id

2.姓名

3.部门

myDesgin.php

1.如果我选择了一个下拉菜单，我想更改另一个下拉菜单，这取决于使用Ajax选择的值

2.是否有可用的代码，如果我选择一个下拉列表，它将转到另一个子窗口，并使用Ajax以表格格式（如报表）显示数据

提前谢谢

---

请给我示例代码，因为我是ajax初学者，如果有人提供ajax代码的解释，我将非常欢迎。

尽管有很多代码可用。我正在为您编写最简单、最基本的代码

HTML

更新_data.php php代码

---

是的，检查以下jQueryAjax代码。 在本例中，如果您更改部门，则它将填充“名称”下拉列表

$document.onchange“部门”，职能E{ var部门=$this.val； $.ajax{ 类型:POST,， 数据：{部门：部门}， url:'admin/users/get_name_list.php'， 数据类型：“json”， 成功：functionjson{ var$el=$name； $el.empty；//删除旧选项 $el.append$ .attrvalue，.text“请选择”； $.eachjson，函数值，键{ $el.append$ .attrvalue，value.textkey； }; } };

---

}; 假设select1和select2是这样的：

<select id="select1">
    <option id="11" value="x">X</option>
    <option id="12" value="y">Y</option>
</select>
<select id="select2">
    <option id="21" value="1">1</option>
    <option id="22" value="2">2</option>
</select>

这假设ajax调用返回如下字符串

<option id="21" value="3">3</option><option id="22" value="4">4</option>

---

从服务器端文件。如果您返回一个json，您必须首先对其进行解码，但这是它的一般要点。看看函数

我想您可以这样做：

创建一个全局函数，该函数接受两个参数：currElem、nextElem和dataObj：

---

检查这个。。希望这对你有很大帮助，你的答案在这里。我不是从Ajax开始的。我只是从数据库中设计页面和下拉列表填充。我可以发布代码吗？感谢那些链接，我已经用过了，但是当我尝试它时，它没有给出正确的输出。可能是因为我对Ajax知识较少。在向下拉列表添加值之前，是否有清空旧项目的选项。我将该代码放在代码$nxtElem.empty中的位置，您应该将其添加到$.each loop.Thank.$之前选择。在那一行的“更改”上，选择是指您更改的下拉列表。对吗？所以我们需要把这个$el.empty称为；如果不删除旧选项，我们可以使用它吗？但当我使用它时，并没有给出结果？我得到了它。如果不想清空旧选项，请删除该行，并将“附加选项”设为“待选择”属性。我编辑了您的代码，其中包含此项。

function update_name(id)
{

    var xmlhttp=new XMLHttpRequest();
     xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     document.getElementById("txt").innerHTML=xmlhttp.responseText;
     }
 }
    xmlhttp.open("GET","update_data.php?q="+id,true);
    xmlhttp.send();
}

<?php
   if(isset($_GET['q'])
    {
            $id= $_GET['q'];
             //based on id run your query
    }

<select id="select1">
    <option id="11" value="x">X</option>
    <option id="12" value="y">Y</option>
</select>
<select id="select2">
    <option id="21" value="1">1</option>
    <option id="22" value="2">2</option>
</select>

$('#select1').on('change', function() {
    $.ajax({
        url: "test.html",
    }).done(function(response) {
        $('#select2').html(response);
});

<option id="21" value="3">3</option><option id="22" value="4">4</option>

function dynoDropdowns(currElem, nxtElem, dataObj){
    $.ajax({
        url:"path/to/file",
        type:"post",
        data:dataObj,
        dataType:"json", // <-------------expecting json from php
        success:function(data){
           $(nxtElem).empty(); // empty the field first here.
           $.each(data, function(i, obj){
               $('<option />',
               {
                   value:obj.value,
                   text:obj.text
               }
                ).appendTo(nxtElem);
           });
        },
        error:function(err){
           console.log(err);
        }
    });
}

$(function(){
    $('select').on('change', function(e){
        if(this.id === "id"){
          var dataObj = {id:this.value};
          dynoDropdowns(this, '#name', dataObj);
        }else if(this.id === "name"){
          var dataObj = {name:this.value};
          dynoDropdowns(this, '#department', dataObj);
        }
    });
});