2014-10-31 120 views
4

的工作,我有两个选择选择框从MySQL数据库jQuery的选上的选择插件没有在PHP Ajax响应

获取值当无1选择箱变则号-2选择框从Ajax响应生成。

选上的插件在完全无1工作。但是当No-2选择框从ajax生成时,选择的插件在No-2选择框中不起作用。

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代码:

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

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>"; 


} 

让我知道我做了什么错误..??

+0

你的问题不明确。根据我的理解,你已经在两个选择框中添加了一些插件,但是该插件在选择框上不起作用。2.如果这是问题,那么它是由于插件没有绑定到选择框-2,因为它是动态生成的。数据加载后,请尝试在选择框2上调用插件。 – 2014-10-31 07:21:29

+0

我称之为“选择 - 选择”来选择框2插件类也 – 2014-10-31 07:24:06

+0

你为什么不使用jQuery的$。阿贾克斯,如果你使用jQuery? – 2014-10-31 07:27:16

回答

3

假设你调用选择第二个名单上,尝试使用

$('#subCat_2').trigger('chosen:updated'); 

你更新其名单后。

如果你看看plugin page表明

'你可以触发对原选择区域的几个事件来调用选择了一个行为。

选择:无论何时更新选上的基本选择元素的变化(如所选选项的变化).`

1

您需要重建,在其新的数据选择框此事件应该被触发。

  if (xmlhttp.readyState==4 && xmlhttp.status==200){ 

       // bind new data 
       document.getElementById("subCat_2").innerHTML=xmlhttp.responseText; 

       // refresh chosen. 
       $('#subCat_2').trigger("chosen:updated"); 
      } 
+0

已经试过这个..不工作:( – 2014-10-31 08:23:39