title: Dynamic dependent dropdown with jquery-select2
body: <p>I am making 3 dynamic dependent dropdowns (selects) using <a href="http://www.codingcage.com/2015/04/dynamic-dependent-select-box-using-jquery-php.html" rel="nofollow">this</a> tutorial. I am also using <a href="https://github.com/select2/select2" rel="nofollow">jquery-select2</a> to enhance user experience. The first select is static (it has only three values), the other 2 are coming from mysql tables.</p>
  
  <p><strong>The problem is:</strong><br>
  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 <a href="http://abstractindia.com/projects/vetonline/tests/ddm/" rel="nofollow">here</a>.</p>
  
  <p>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.</p>
  
  <p>I am not able to work out how to solve this. </p>
  
  <p><strong>Edit</strong>  </p>
  
  <p>Here is index.php </p>
  
  <pre><code>&lt;?php include_once 'includes/dbconfig.php'; ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Dynamic Dependent Select Box using jQuery and PHP&lt;/title&gt;
  &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/font-awesome.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="js/select2-bootstrap.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="js/select2.css"&gt;
  
  &lt;script src="js/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.steps.js"&gt;&lt;/script&gt;
  &lt;script src="js/select2.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(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);
  } 
  });
  });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;h2&gt;Step&lt;/h2&gt;
  &lt;section data-step="5"&gt;
  &lt;h2&gt;Course Details:&lt;/h2&gt;
  &lt;p&gt;Please provide following information regarding your course. All fields are compulsory and are required.&lt;/p&gt;
  &lt;hr&gt;
  
  &lt;!--Local Select field--&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="cr_coursetype" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label"&gt;Course Type:&lt;/label&gt;
  &lt;div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
  &lt;select name="cr_coursetype" class="cr_coursetype" data-allow-clear="true" tabindex="1" placeholder="Select Course Type"&gt;
  &lt;option selected="selected"&gt;--Select coursetype--&lt;/option&gt;
  &lt;option value="1"&gt;Certificate&lt;/option&gt;
  &lt;option value="2"&gt;Diploma&lt;/option&gt;
  &lt;option value="3"&gt;Degree&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;                    
  
  &lt;!--Dynamic Select field--&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="cr_coursedescription" class="col-lg-4 col-md-4 col-sm-4 col-xs-4     control-label"&gt;Course Description:&lt;/label&gt;
  &lt;div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
  &lt;select name="cr_coursedescription" class="cr_coursedescription" data-allow-clear="true" tabindex="2" placeholder="Select Course"&gt;
  &lt;option selected="selected" &gt;--Select Course--&lt;/option&gt;
  
  &lt;/select&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="form-group"&gt;
  &lt;label for="cr_coursetitle" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label"&gt;Course Title:&lt;/label&gt;
  &lt;div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
  &lt;select name="cr_coursetitle" class="cr_coursetitle" data-allow-clear="true" tabindex="3" placeholder="Select Course Title"&gt;
  &lt;option selected="selected"&gt;--Select Title--&lt;/option&gt;
  
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="form-group"&gt;
  &lt;label for="cr_coursesubject" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 control-label"&gt;Special Subject:&lt;/label&gt;
  &lt;div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
  &lt;select name="cr_coursesubject" class="cr_coursesubject" data-allow-clear="true" tabindex="4" placeholder="Select Course Subject"&gt;
  &lt;option selected="selected"&gt;--Select Subject--&lt;/option&gt;
  
  &lt;/select&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/section&gt;
  &lt;/div&gt;              
  
  &lt;script&gt;
  //disabled jquery-select
  /*$('select').select2({
  dropdownAutoWidth : false
  });*/
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is get_course.php</p>
  
  <pre><code>&lt;?php include('includes/dbconfig.php'); 
  if($_POST['id'])
  {
  $id=$_POST['id'];
  
  $stmt = $DB_con-&gt;prepare("SELECT * FROM lt_coursedescription WHERE CourseType=:id");
  $stmt-&gt;execute(array(':id' =&gt; $id));
  ?&gt;&lt;option selected="selected"&gt;Select Course :&lt;/option&gt;&lt;?php
  while($row=$stmt-&gt;fetch(PDO::FETCH_ASSOC))
  {
      ?&gt;
      &lt;option value="&lt;?php echo $row['CourseDescriptionID']; ?&gt;"&gt;&lt;?php echo $row['CourseDescriptionLong']; ?&gt;&lt;/option&gt;
      &lt;?php
  }
  }
  ?&gt;
  </code></pre>
  
  <p>I hope this will help understand the problem.</p>