Я делаю 3 динамически зависимых выпадающих меню (выбирает), используя этот учебник. Я также использую jquery-select2 для улучшения пользовательского интерфейса. Первый выбор является статическим (он имеет только три значения), другие 2 поступают из таблиц mysql.
Проблема в:
Когда я делаю выбор в первом списке выбора. Второй – простой (неизбираемый) список курсов, а «Выбор списка» – нет. Проблемная страница здесь живая.
Когда я отключу плагин jquery-select2, списки выбора работают отлично. Список курсов займет много времени, так как есть еще несколько курсов. Таким образом, 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 } } ?>в<?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 } } ?>
Надеюсь, это поможет понять проблему.