如何使用PHP创建的HTML与Parse.com云数据库动态的DropDownList [英] How to create dynamic dropdownlist using php in HTML with Parse.com Cloud DB
问题描述
我在解析云计算的数据库。并想检索下拉列表中的数据。我有4个下拉菜单，因为我选择的第一个下拉及其相关列表应显示为第二个下拉列表，并进一步进入第三个下拉菜单等。
对于例：第一个下拉的课程列表，我选择的过程中，相关学科应显示为第二个下拉菜单，然后选择主题列表中后，其关注的章节应该会显示在下一个下拉列表。
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= ISO-8859-1/＆GT;
＆LT;冠军＆GT;动态依赖的选择框＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jQuery的-1.4.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）
{
$（套餐）。改变（函数（）
{
VAR ID = $（本）.VAL（）;
VAR dataString ='ID ='+ ID;
$就
（{
键入：POST，
网址：get_chapter.php
数据：dataString，
缓存：假的，
成功：函数（HTML）
{
$（年）HTML（HTML）。
}
}）;
}）;
$（年）。改变（函数（）
{
VAR ID = $（本）.VAL（）;
VAR dataString ='ID ='+ ID;
$就
（{
键入：POST，
网址：get_subject.php
数据：dataString，
缓存：假的，
成功：函数（HTML）
{
$（科）HTML（HTML）;
}
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;风格＆GT;
标签
{
字体重量：大胆的;
填充：10px的;
}
DIV
{
的margin-top：100px的;
}
选择
{
宽度：200像素;
高度：35px;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;中心＆GT;
＆LT; DIV＆GT;
＆LT;标签＆gt;课程：LT; /标签＆gt;
＆LT;选择名称=当然ID =当然级=当然＆GT;
＆LT;期权价值=＆GT;选择...＆LT; /选项＆GT;
＆LT; PHP的foreach（$ course_array为$类）{$类=用htmlspecialchars（$类）;？＆GT;
＆LT;期权价值=＆LT; PHP的echo $类;？＆GT;＆GT;＆LT; PHP的echo $类; ？＆GT;＆LT; /选项＆GT;
＆LT; PHP
}
？＆GT;
＆LT; /选择＆GT;
＆LT;标签＆gt;年份：＆LT; /标签＆gt; ＆LT;选择名称=年ID =一年级=状态＆GT;
＆LT;选项选择=选择＆GT; - 选择年份 - ＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;标签＆gt;主题：＆LT; /标签＆gt; ＆LT;选择名称=主题类=城与GT;
＆LT;选项选择=选择＆GT; - 选择主题 - ＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
所以，按你的示例首先加载所有的课程到您的下拉列表。 然后在你的第一个下拉菜单中更改事件编写Ajax调用来获取相关学科（你的情况），然后你的onchange主题写另一个Ajax调用来获取下一个下拉列表中的数据等...
另一种方法可以在每个下拉的变化提交表单和接收使用$ _GET或$ _POST页面的价值，并根据你的价值填充您的选择框
希望这将有助于你
I have a database in Parse Cloud. and would like to retrieve the data in dropdown lists. I have 4 dropdowns, as I select first dropdown its related lists should be displayed into second dropdown list and further into third dropdown etc.
For Ex.: first dropdown is list of courses, as I select the course, its related subjects should be displayed into second dropdown, and after selecting subject list its concerned chapters should be displayed in the next dropdown.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box </title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".course").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_chapter.php",
data: dataString,
cache: false,
success: function(html)
{
$(".year").html(html);
}
});
});
$(".year").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subjects").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:200px;
height:35px;
}
</style>
</head>
<body>
<center>
<div>
<label>Course :</label>
<select name="course" id="course" class="course">
<option value = "">Select...</option>
<?php foreach($course_array as $category) {$category = htmlspecialchars($category);?>
<option value="<?php echo $category; ?>"><?php echo $category; ?></option>
<?php
}
?>
</select>
<label>Year :</label> <select name="year" id="year" class="state">
<option selected="selected">--Select Year--</option>
</select>
<label>Subjects :</label> <select name="subjects" class="city">
<option selected="selected">--Select Subjects--</option>
</select>
</div>
So as per your example first load all the courses into your dropdown. Then on change event of your first dropdown write an ajax call to get the related subjects(in your case) and then onchange of your subject write another ajax call to get the data for next dropdown and so ...
Another approach can be on change of each dropdown submit the form and receive the value in your page using $_GET or $_POST and based on your value populate your select box
Hope It will help you
这篇关于如何使用PHP创建的HTML与Parse.com云数据库动态的DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
