Menú desplegable dependiente dynamic con jquery-select2

Estoy haciendo 3 desplegables dependientes dynamics (selecciona) usando este tutorial. También estoy usando jquery-select2 para mejorar la experiencia del usuario. La primera selección es estática (tiene solo tres valores), las otras 2 provienen de tablas mysql.

El problema es:
Cuando realizo la selección en la primera lista de selección. El segundo se convierte en una lista de cursos simple (no seleccionable) y la “Lista de selección” se ha ido. La página problemática está en vivo aquí .

Cuando desactivo el plugin jquery-select2, las listas de selección funcionan perfectamente. La lista de cursos será larga ya que hay más cursos para insertar. Por lo tanto, jquery-select2 se usa para mejorar la experiencia del usuario, de modo que el usuario pueda comenzar a escribir en el cuadro de búsqueda y el curso se rellene en consecuencia, sin necesidad de desplazarse hacia abajo en la lista larga.

No soy capaz de resolver cómo resolver esto.

Editar

Aquí está index.php

     Dynamic Dependent Select Box using jQuery and PHP           $(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); } }); }); });    

Step

Course Details:

Please provide following information regarding your course. All fields are compulsory and are required.


--Select coursetype-- Certificate Diploma Degree
--Select Course--
--Select Title--
--Select Subject--
//disabled jquery-select /*$('select').select2({ dropdownAutoWidth : false });*/

Aquí está get_course.php

 prepare("SELECT * FROM lt_coursedescription WHERE CourseType=:id"); $stmt->execute(array(':id' => $id)); ?>Select Course :fetch(PDO::FETCH_ASSOC)) { ?> <option value="">  

Espero que esto ayude a entender el problema.

Solutions Collecting From Web of "Menú desplegable dependiente dynamic con jquery-select2"

Las clases que están en su original se copian en el

generado por Select2, por lo que no debe esperar obtener su original solo con un selector de clase.

Lo que está sucediendo ahora es que está configurando .html() de

lugar de , por lo que ya no se muestra correctamente. En lugar de hacer

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

Deberías probar

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

Por lo tanto, solo obtiene el elemento .