jquery-select2 的动态依赖下拉列表
Dynamic dependent dropdown with jquery-select2
我正在使用 this tutorial. I am also using jquery-select2 制作 3 个动态相关下拉菜单(selects)以增强用户体验。第一个 select 是静态的(它只有三个值),其他 2 个来自 mysql 表。
问题是:
当我在第一个 select 列表上创建 selection 时。第二个变成了一个简单的(非select可用)课程列表,"Select List"消失了。有问题的页面已上线 here.
当我禁用 jquery-select2 插件时,select 列表工作正常。插入的课程越多,课程列表就会越长。所以 jquery-select2 用于增强用户体验,这样用户就可以开始在搜索框中输入内容并相应地填充课程,无需向下滚动长列表。
我不知道如何解决这个问题。
编辑
这里是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
<?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
}
}
?>
希望这有助于理解问题。
原始 <select>
上的 类 被复制到由 Select2 生成的 <div>
,因此您不应期望仅通过使用 class 选择器。
现在发生的情况是您正在设置 <div>
的 .html()
而不是 <select>
,这就是它不再正确显示的原因。而不是做
$(".cr_coursedescription").html(html);
你应该试试
$("select.cr_coursedescription").html(html);
所以它只获取 <select>
元素。
我正在使用 this tutorial. I am also using jquery-select2 制作 3 个动态相关下拉菜单(selects)以增强用户体验。第一个 select 是静态的(它只有三个值),其他 2 个来自 mysql 表。
问题是:
当我在第一个 select 列表上创建 selection 时。第二个变成了一个简单的(非select可用)课程列表,"Select List"消失了。有问题的页面已上线 here.
当我禁用 jquery-select2 插件时,select 列表工作正常。插入的课程越多,课程列表就会越长。所以 jquery-select2 用于增强用户体验,这样用户就可以开始在搜索框中输入内容并相应地填充课程,无需向下滚动长列表。
我不知道如何解决这个问题。
编辑
这里是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
<?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
}
}
?>
希望这有助于理解问题。
<select>
上的 类 被复制到由 Select2 生成的 <div>
,因此您不应期望仅通过使用 class 选择器。
现在发生的情况是您正在设置 <div>
的 .html()
而不是 <select>
,这就是它不再正确显示的原因。而不是做
$(".cr_coursedescription").html(html);
你应该试试
$("select.cr_coursedescription").html(html);
所以它只获取 <select>
元素。