Dynamic dependent dropdown with jquery-select2

问题

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.

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.

Edit

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>

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.

回答1:

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.

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);

You should try out

$("select.cr_coursedescription").html(html);

So it only gets the <select> element.

来源：https://stackoverflow.com/questions/33106176/dynamic-dependent-dropdown-with-jquery-select2

标签

php

jquery

mysql

ajax

jquery-select2