jquery-select2動態相關下拉

我使用this教程製作3個動態相關下拉（選擇）。我也使用jquery-select2來增強用戶體驗。第一個選擇是靜態的（它只有三個值），另外兩個來自mysql表。jquery-select2動態相關下拉

問題是：
當我在第一個選擇列表上進行選擇。第二個變成一個簡單的（不可選擇的）課程列表，並且「選擇列表」消失。有問題的頁面是現場here。

當我禁用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 
} 
} 
?>

我希望這將有助於理解這個問題。

來源

2015-10-13 Kamlesh Panchal

除非和直到您提供代碼，否則任何人都可以幫助您糾正問題。 –

10是的！先生，我會在一段時間內提供代碼。 –

將原來的<select>上的類複製到由Select2生成的<div>，因此您不應期望僅通過使用類選擇器即可獲得原始<select>。

現在發生的情況是，您正在設置<div>的.html()而不是<select>，這就是爲什麼它不再被正確顯示的原因。而不是做

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

的你應該嘗試

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

所以只得到<select>元素。

來源

2015-10-13 16:09:33

jquery-select2動態相關下拉

回答

相關問題