动态下拉列表 [英] Dynamic dropdown list
本文介绍了动态下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想添加2个动态下拉列表，一个用于科目，另一个用于课程。当我选择科目时，添加到该科目的课程应加载到课程下拉列表中，然后为该课程添加章节。
我该怎么做？
任何帮助将不胜感激。
以下是我的代码：
< div class =content-form-inner>
< div id =page-heading>输入详情< / div>
< div class =form_loaderid =thisFormLoader>< / div>
< div id =error_message>< / div>
< form name =thisFormid =thisFormaction =editchapters.php？mode =<？php echo $ _REQUEST ['mode'];？& id =<？php echo $ id;？> method =postenctype =multipart / form-data>
< tr>
< th valign =topstyle =width：0％>< span class =required> *< / span>主题< / th>
< td style =width：0％>
< option value =>选择< / option>
<？php
$ sql =select * from mock_subject;
$ res = mysqli_query（$ dbhandle，$ sql）;
$ numrows = mysqli_num_rows（$ res）;
echo mysql_error（）;
if（$ numrows）{
while（$ obj = mysqli_fetch_object（$ res））{
if（$ obj-> status == 1）{
if（$ subject == $ obj-> id）{
echo'< option value ='。$ obj-> id。'选择>。（$ obj-> SUBJECT_NAME）。 '< /选项>';
}
else {
echo'< option value ='。$ obj-> id。'>'。（$ obj-> subject_name）。'< /选项>';
}
}
}
}
？>
< / select>
< / td>
< td style =width：0％;>
< div id =subject_id-errorclass =error-inner>< / div>
< / td>
< td>< / td>
< / tr>
< tr>
< th valign =topstyle =width：0％>< span class =required> *< / span>课程< / th>
< td style =width：0％>
< option value =>选择< / option>
<？php
$ sql =select * from mock_course;
$ res = mysqli_query（$ dbhandle，$ sql）;
$ numrows = mysqli_num_rows（$ res）;
echo mysql_error（）;
if（$ numrows）{
while（$ obj = mysqli_fetch_object（$ res））{
if（$ obj-> status == 1）{
if（$ course == $ obj-> id）{
echo'< option value ='。$ obj-> id。'选择>（$ obj-> COURSE_NAME）。 '< /选项>';
}
else {
echo'< option value ='。$ obj-> id。'>'。（$ obj-> course_name）。'< /选项>';
}
}
}
}
？>
< / select>
< / td>
< td style =width：0％;>
< div id =course_id-errorclass =error-inner>< / div>
< / td>
< td>< / td>
< / tr>
< tr>
< th>< span class =required> *< / span> Chapter< / th>
< td>< input type =textname =chapter_nameclass =inp-form requiredvalue =<？php echo $ chapter;？> style =color：＃000！important;>< / td>
< td>
< div>< / div>
< / td>
< / tr>
< tr>
< th>& nbsp;< / th>
< td valign =top>< input type =submitname =submit_buttonvalue =<？php echo $ mode ==edit？Update：Add ？>中class =form-submit/>
< input type =resetvalue =重置class =form-reset/>
< / tr>
< / table>
< / form>
< div class =clear>< / div>
< / div>
解决方案
创建动态下拉列表最简单的方法是使用jquery里面头标记。
给 onchange（）事件并使用jquery代码将数据引导到另一个页面，然后链接2个下拉列表。我做的代码是这样的，我认为这是动态下拉的最简单方法。
我包含的jquery是
< script>
函数ajaxDrp（data）{
$ .ajax（{
method：POST，
url：chapterDropdown.php，
data：{
id：data
}
}）。success（function（data）{
$（'＃selectCourse'）。empty（）;
$（'＃selectCourse' ）.append（数据）;
}）;
}
< / script>
#selectCourse 是我给出的ID到另一个必须与第一个下拉列表同步的下拉列表。
jquery中给定的url是收集第一个下拉列表数据的路径。在我的例子中，代码如下所示：
<？php
$ id = $ _REQUEST [ 'ID'];
$ query =SELECT * FROM`你的表名'where'subject_id =。 $ ID;
$ result = mysqli_query（$ dbhandle，$ query）;
$ count = 0;
$ option`enter code here` ='';
while（$ row = mysqli_fetch_assoc（$ result））{
$ option。='< option
value =''。$ row ['id']。'>' 。$行[ 'COURSE_NAME'] '< /选项>';
}
echo $ option;
？>
- subjects
- course
- chapters
I want to add 2 dynamic dropdown lists, one is for subjects, and one is for course. When I select subject, courses which is added to that subject should be loaded in the course dropdown list, and then add chapters to that courses.
How do I do that?
Any help would be appreciated.
Here is my code:
<div class="content-form-inner">
<div id="page-heading">Enter the details</div>
<div class="form_loader" id="thisFormLoader"></div>
<div id="error_message"></div>
<form name="thisForm" id="thisForm" action="editchapters.php?mode=<?php echo $_REQUEST['mode']; ?>&id=<?php echo $id; ?>" method="post" enctype="multipart/form-data">
<table border="0" cellpadding="0" cellspacing="0" id="id-form" >
<tr>
<th valign="top" style="width:0%"><span class="required">*</span>Subject</th>
<td style="width: 0%">
<select name="subject_name" class="select-form required " style="color:#000 !important;width:200px !important">
<option value="">Select</option>
<?php
$sql = "select * from mock_subject ";
$res = mysqli_query($dbhandle,$sql);
$numrows =mysqli_num_rows($res);
echo mysql_error();
if($numrows){
while($obj = mysqli_fetch_object($res)){
if($obj->status == 1){
if($subject == $obj->id){
echo '<option value="'.$obj->id.'" selected>'.($obj->subject_name).'</option>';
}
else{
echo '<option value="'.$obj->id.'">'.($obj->subject_name).'</option>';
}
}
}
}
?>
</select>
</td>
<td style="width: 0%;">
<div id="subject_id-error" class="error-inner"></div>
</td>
<td></td>
</tr>
<tr>
<th valign="top" style="width:0%"><span class="required">*</span>Course</th>
<td style="width: 0%">
<select name="course_name" class="select-form required " style="color:#000 !important;width:200px !important">
<option value="">Select</option>
<?php
$sql = "select * from mock_course ";
$res = mysqli_query($dbhandle,$sql);
$numrows =mysqli_num_rows($res);
echo mysql_error();
if($numrows){
while($obj = mysqli_fetch_object($res)){
if($obj->status == 1){
if($course == $obj->id){
echo '<option value="'.$obj->id.'" selected>'.($obj->course_name).'</option>';
}
else{
echo '<option value="'.$obj->id.'">'.($obj->course_name).'</option>';
}
}
}
}
?>
</select>
</td>
<td style="width: 0%;">
<div id="course_id-error" class="error-inner"></div>
</td>
<td></td>
</tr>
<tr>
<th><span class="required">*</span>Chapter</th>
<td><input type="text" name="chapter_name" class="inp-form required" value="<?php echo $chapter;?>" style="color:#000 !important;"></td>
<td>
<div></div>
</td>
</tr>
<tr>
<th> </th>
<td valign="top"><input type="submit" name="submit_button" value="<?php echo $mode=="edit"? "Update" : "Add" ?>" class="form-submit" />
<input type="reset" value="Reset" class="form-reset" />
</tr>
</table>
</form>
<div class="clear"></div>
</div>
解决方案
Easiest way of creating dynamic dropdown is by using jquery inside the head tag.
Give onchange() event and guide the data to another page using jquery code, and then link 2 dropdowns. The code I did is like this, which I felt is the easiest way for dynamic dropdowns.
jquery which I included is
<script>
function ajaxDrp(data){
$.ajax({
method: "POST",
url: "chapterDropdown.php",
data: {
id: data
}
}).success(function(data) {
$('#selectCourse').empty();
$('#selectCourse').append(data);
});
}
</script>
#selectCourse is the id I have given to the other dropdown which have to be in sync with the first dropdown.
The given url in the jquery is the path where data of first dropdown is getting collected. In my case, the code is like this:
<?php
$id = $_REQUEST['id'];
$query = "SELECT * FROM `your table name` WHERE subject_id = " . $id;
$result = mysqli_query($dbhandle,$query);
$count = 0;
$option`enter code here` = '';
while($row = mysqli_fetch_assoc($result)) {
$option .= '<option
value="'.$row['id'].'">'.$row['course_name'].'</option>';
}
echo $option;
?>
这篇关于动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
