当使用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);
试用该示例,让我们知道这是否适合您。
相关文章:
- d3基于用户选择动态更新节点
- 如何从相应的控制器动态更新标题和描述
- 根据CHECKBOX输入值动态更新DIV信息
- HTML动态更新滑块输入
- 如何使用ajax和jquery动态更新数组表
- 如何动态更新输入值属性
- 动态更新chartJ中的图表
- 动态更新Angular2指令中自定义属性的值
- jQuery动态更新数据键和值
- 如何在jQuery的.on()方法中动态更新按钮的ID选择器
- 使用 php/jquery 动态更新单个模态
- 在 Ionic 中动态更新滚动区域
- 具有动态更新的实时标题 (AJAX+jQuery)
- jQuery:动态更新 N 个最新值的列表
- 如何动态更新选择值
- 将URL路径与<a>attr('href')来动态更新.active类
- Jquery调整大小动态更新
- 在javascript中动态更新嵌套对象
- javascript中的文本框未正确动态更新
- 动态更新Ace Editor+Requirejs的语法高亮显示