Question

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

数据库字段：

1.id

2.name

3.department

myDesgin.php

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

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

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

先谢谢。

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

Answer 1

是的，请查看以下jquery ajax代码。在此示例中，如果您更改＆＃34;部门＆＃34;然后它将填充＆＃34;名称＆＃34;的列表。下拉列表。

＆＃13;

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

＆＃13;

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
    }

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

4 个答案: