[英]Jquery Chosen Select plugin doesn't Work in PHP Ajax response
I have two chosen select box for fetching values from MYSQL DB 我有两个选择的选择框用于从MYSQL DB获取值
When No-1 Select box change then No-2 select box generate from AJAX response. 当No-1 Select框改变时,No-2选择框从AJAX响应生成。
Chosen Plugin in No-1 work perfectly. No-1中的Chosen插件完美运行。 But When No-2 select box generate from ajax then chosen plugin doesn't work in No-2 select box.
但是当从ajax生成No-2选择框时,选择的插件在No-2选择框中不起作用。
Main.PHP Main.PHP
<div class="control-group">
<label for="textfield" class="control-label">Category<span>*</span></label>
<div class="controls">
<select name="category" id="category" multiple="multiple" class="chosen-select input-medium" required onchange="showSubCat(this.value)">
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
</select>
<input type='hidden' value='' id='categoryId' name='categoryId'>
</div>
</div>
<div class="control-group">
<label for="textfield" class="control-label">Sub Category</label>
<div class="controls">
<select name="subCat_2" id="subCat_2" multiple="multiple" class="chosen-select input-large">
<option value="">--- Select Sub Category---</option>
</select>
</div>
</div>
JS CODE : JS代码:
var xmlhttp;
function showSubCat(str){
if( $('#category :selected').length > 0){
//build an array of selected values
var selectednumbers = [];
$('#category :selected').each(function(i, selected) {
selectednumbers[i] = $(selected).val();
});
}
//alert(selectednumbers);
document.getElementsByName('categoryId')[0].value = selectednumbers;
if (str==""){
document.getElementById("subCat_2").innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("subCat_2").innerHTML=xmlhttp.responseText;
//alert(xmlhttp.responseText);
console.log(xmlhttp.responseText);
}
}
xmlhttp.open("GET","MYurl.php?catId="+selectednumbers,true);
xmlhttp.send();
}
AJAX.PHP AJAX.PHP
echo "<option value=''>--- Select Sub Category --- </option>";
$sql="SELECT field FROM tableName WHERE condition;
$result = mysql_query($sql) or die('MySql Error' . mysql_error());
while($row = mysql_fetch_array($result)){
echo "<option value='1'> ----- Sub Option 1</option>";
}
Let me know what i have done Wrong..?? 让我知道我做错了什么.. ??
Assuming you're calling chosen on the 2nd list, try using 假设您在第二个列表中选择了呼叫,请尝试使用
$('#subCat_2').trigger('chosen:updated');
after you update its list. 更新其列表后。
If you look at plugin page it indicates that 如果你看一下插件页面就表明了这一点
`You can trigger several events on the original select field to invoke a behavior in Chosen. `您可以在原始选择字段上触发多个事件以调用选择中的行为。
chosen:updated This event should be triggered whenever Chosen's underlying select element changes (such as a change in selected options).` selected:updated每当选择的基础选择元素发生更改(例如所选选项中的更改)时,应触发此事件
You need to rebuild the selectbox with new data in it. 您需要使用新数据重建选择框。
if (xmlhttp.readyState==4 && xmlhttp.status==200){
// bind new data
document.getElementById("subCat_2").innerHTML=xmlhttp.responseText;
// refresh chosen.
$('#subCat_2').trigger("chosen:updated");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.