使用jQuery，选择2动态依赖下拉 [英] Dynamic dependent dropdown with jquery-select2
问题描述
我使用的这个教程。我也使用的jQuery选择2 ，以增强用户体验。第一个选择是静态的（它只有三个值），其他2由MySQL表到来。
I am making 3 dynamic dependent dropdowns (selects) using this tutorial. I am also using jquery-select2 to enhance user experience. The first select is static (it has only three values), the other 2 are coming from mysql tables.
的问题是：
当我做出选择的第一个选择列表。第二个成为课程和选择列表一个简单的（不可选）列表不见了。有问题的网页是实时这里。
The problem is:
When I make selection on first select list. The second one becomes a simple (non-selectable) list of courses and the "Select List" is gone. The problematic page is live here.
当我禁用了jQuery，选择2插件，选择列表中的正常使用。因为有更多的课程插入课程列表会很长。因此，jQuery的，选择2用于提升用户体验，让用户可以在搜索框中开始输入和课程进行相应填充，无需向下滚动长长的名单。
When I disable the jquery-select2 plugin, the select lists are working perfectly. The Course list will get long as there are more courses to be inserted. So jquery-select2 is used to enhance the user experience, so that user can start typing in the search box and the course is populated accordingly, no need to scroll down the long list.
我无法工作，如何解决这个问题。
I am not able to work out how to solve this.
修改
下面是的index.php
Here is index.php
<?php include_once 'includes/dbconfig.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 using jQuery and PHP</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="js/select2-bootstrap.css">
<link rel="stylesheet" type="text/css" href="js/select2.css">
<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.steps.js"></script>
<script src="js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".cr_coursetype").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_course.php",
data: dataString,
cache: false,
success: function(html)
{
$(".cr_coursedescription").html(html);
}
});
});
$(".cr_coursedescription").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_coursetitle.php",
data: dataString,
cache: false,
success: function(html)
{
$(".cr_coursetitle").html(html);
}
});
});
$(".cr_coursedescription").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".cr_coursesubject").html(html);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Step</h2>
<section data-step="5">
<h2>Course Details:</h2>
<p>Please provide following information regarding your course. All fields are compulsory and are required.</p>
<hr>
<!--Local Select field-->
<div class="form-group">
<label for="cr_coursetype" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">Course Type:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select name="cr_coursetype" class="cr_coursetype" data-allow-clear="true" tabindex="1" placeholder="Select Course Type">
<option selected="selected">--Select coursetype--</option>
<option value="1">Certificate</option>
<option value="2">Diploma</option>
<option value="3">Degree</option>
</select>
</div>
</div>
<!--Dynamic Select field-->
<div class="form-group">
<label for="cr_coursedescription" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">Course Description:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select name="cr_coursedescription" class="cr_coursedescription" data-allow-clear="true" tabindex="2" placeholder="Select Course">
<option selected="selected" >--Select Course--</option>
</select>
</div>
</div>
<div class="form-group">
<label for="cr_coursetitle" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">Course Title:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select name="cr_coursetitle" class="cr_coursetitle" data-allow-clear="true" tabindex="3" placeholder="Select Course Title">
<option selected="selected">--Select Title--</option>
</select>
</div>
</div>
<div class="form-group">
<label for="cr_coursesubject" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label">Special Subject:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<select name="cr_coursesubject" class="cr_coursesubject" data-allow-clear="true" tabindex="4" placeholder="Select Course Subject">
<option selected="selected">--Select Subject--</option>
</select>
</div>
</div>
</div>
</section>
</div>
<script>
//disabled jquery-select
/*$('select').select2({
dropdownAutoWidth : false
});*/
</script>
</body>
</html>
下面是get_course.php
Here is get_course.php
<?php include('includes/dbconfig.php');
if($_POST['id'])
{
$id=$_POST['id'];
$stmt = $DB_con->prepare("SELECT * FROM lt_coursedescription WHERE CourseType=:id");
$stmt->execute(array(':id' => $id));
?><option selected="selected">Select Course :</option><?php
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['CourseDescriptionID']; ?>"><?php echo $row['CourseDescriptionLong']; ?></option>
<?php
}
}
?>
我希望这将有助于理解这个问题。
I hope this will help understand the problem.
推荐答案
类是在原来的＆LT;选择＆GT; 复制到 ＆LT; DIV＆GT; 以选择二生成的，所以你不应该希望得到你原来的＆LT;选择＆GT; 只需使用一类选择
Classes that are on your original <select> are copied to the <div> generated by Select2, so you shouldn't expect to get your original <select> just by using a class selector.
这是怎么回事，现在是你设置的.html（）的＆LT; DIV＆GT; 而不是＆LT;选择＆GT; ，这就是为什么它不再正常显示。而不是做的
What is happening right now is that you are setting the .html() of the <div> instead of the <select>, which is why it is no longer being displayed properly. Instead of doing
$(".cr_coursedescription").html(html);
您应该尝试
$("select.cr_coursedescription").html(html);
所以只得到＆LT;选择＆GT; 元素
这篇关于使用jQuery，选择2动态依赖下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
