当使用PHP，MySQL和AJAX更改单选按钮值时，动态更新下拉菜单的内容 - Dynamically updating content of drop down menu when radio button value is changed using PHP, MySQL and AJAX

>我正在创建一个表单，其中有两个单选按钮和一个下拉列表。我希望当用户更改他们选择的单选按钮时，下拉列表也会更改其值，这些值将从具有两列名称为 life 和 general 的数据库表中选取。

以下是请求的片段.php

    <input type="radio" name="department" id="department" value="life" onchange="listDept(this.value)" checked>Life
    <input type="radio" name="department" id="department" value="general">General 
   </td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td>
    <select name="department" id="listDept">
 </select>

下面是用于查询数据库的 getDepartment.php 文件：

<?php
require 'connectdb.php';
$department =NULL;
if(isset($_POST['department'])){$department = $_POST['department']; } 
if($department == "life")
{
	$query = "select life from tbl_departments";
	$result = mysqli_query($con, $query);
	while($row = mysqli_fetch_array($result))
		echo '<option>'.$row['life'].'</optiom>>';
}
if($department == "general")
{
	$query = "select general from tbl_departments";
	$result = mysqli_query($con, $query);
	while($row = mysqli_fetch_array($result))
		echo '<option>'.$row['general'].'</option>';
}

以下是用于检查用户选择的 AJAX 脚本：

function listDept()
{
	var dept = document.getElementById("department").value;
	var xhr;
	if (window.XMLHTTPRequest) { //Mozilla, Safari...
		xhr = new XMLHTTPRequest();
	}
	else if (window.ActiveXObject) { //IE8 and older
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	var data = "department" + dept;
	xhr.open("POST", "./parse_files_php/getdepartment.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(data);
	xhr.onreadystatechange = display_data;
	function display_data(){
		if(xhr.readyState==4){
			if (xhr.status==200) {
				document.getElementById("listDept").innerHTML = xhr.responseText;
			}
			else {
				alert('There was a problem with the request.');
			}
		}
	}
}

我没有从服务器收到任何反馈，即下拉列表未填充。

我的数据库连接工作正常。

如果您愿意将jquery用于该功能的页面脚本你可以参考我的例子。

.HTML：

    <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.11.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("input[name='department']").click(function() {
                    //console.log($('input:radio[name=department]:checked').val());
                    getSelectOptions($('input:radio[name=department]:checked').val());
                    //AJAX CALL
                });
            });
            function getSelectOptions(radioVal) {
                $.ajax({
                    type: 'POST',
                    url: 'dbo.php',
                    data: {'radioval': radioVal},
                    success: function(data) {
                        //console.log(data);
                        updateSelect(data)
                    }
                });
            }
            function updateSelect(data) {
                var json = $.parseJSON(data);
                console.log(json);
                var selectHTML;
                $.each(json, function(key, value) {
                    console.log(value);
                    selectHTML += "<option value=" + value + ">" + value + "</option>";
                });
                $('#listDept').html(selectHTML);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="radio" name="department" id="department" value="life">Life
            <input type="radio" name="department" id="department" value="general">General 
            <select name="department" id="listDept">
            </select>
        </form>
    </body>
</html>

和我的虚拟PHP文件，它返回列表条目，这些条目显然将包含您的数据库调用等。

德博.php

<?php
$radio=$_REQUEST['radioval'];
$selectArray=array();
if($radio=='life'){
$selectArray[0]='life1';
$selectArray[1]='life2';
}else if($radio=='general'){
$selectArray[0]='general1';
$selectArray[1]='general2';
}
echo json_encode($selectArray);

试用该示例，让我们知道这是否适合您。