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

Question

您好，我想使用 Ajax 管理下拉菜单中的数据。

数据库字段：

1.id

2.名称

3.部门

myDesgin.php

     <select id="id"></select>
     <select id="name"></select>
     <select id="department"></select>

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

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

提前致谢。

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

Answer 1

是的，请检查以下 jquery ajax 代码。 在此示例中，如果您更改“部门”，那么它将填充“名称”下拉列表。

$(document).on("change", '#department', function(e) {
            var department = $(this).val();
            

            $.ajax({
                type: "POST",
                data: {department: department},
                url: 'admin/users/get_name_list.php',
                dataType: 'json',
                success: function(json) {

                    var $el = $("#name");
                    $el.empty(); // remove old options
                    $el.append($("<option></option>")
                            .attr("value", '').text('Please Select'));
                    $.each(json, function(value, key) {
                        $el.append($("<option></option>")
                                .attr("value", value).text(key));
                    });														
	                

                    
                    
                }
            });

        });

Answer 2

我猜你可以这样做：

创建一个接受两个参数currElem, nextElem 和dataObj 的全局函数：

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);
        }
    });
});

Answer 3

给定 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>

那么你可以用 jQuery 做这样的事情：

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

这假设您的 ajax 调用返回一个类似的字符串

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

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

Answer 4

虽然那里有很多可用的代码。我正在为您编写最简单和基本的代码。

HTML

<select id="id" onchange="update_name(this.id)"></select>

AJAX 代码

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();
}

update_data.php（PHP 代码）

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