Multiple Select Drop Down Not Working with CHOOSEN.PROTO

[accra]

Am using ajax to populate a drop down list, and it works fine, but i just can't find a way to make choosen.proto to work.
It works on other drop-down, but not the one populated with ajax.

In short, the form must allow the user to select multiple items

Here is my my script.

javascript code

<script>
                function showCat(str)
                {
                if (str=="")
                  {
                  document.getElementById("catHint").innerHTML="";
                  return;
                  } 
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                    document.getElementById("catHint").innerHTML=xmlhttp.responseText;
                    }
                  }
                xmlhttp.open("GET","cat.php?q="+str,true);
                xmlhttp.send();
                }
              </script>

Here is the code that receives the value from the Javascript above (cat.php)

<?php session_start(); include "inc/config.php";?>
<br clear="all" /><br clear="all" />
<select name="insurance_name" id="insurance_name" class="chzn-select span10">
<option>
<?php
    $q=$_GET['q'];
    $query = "SELECT * FROM sub_cat WHERE catz_name='$q' ORDER by id desc";
    $rs = mysql_query($query);
    while($row = mysql_fetch_assoc($rs)) 
        { $pro_name = $row['pro_name'];
          echo"
        <option value='$pro_name'>$pro_name</option>
                                  ";
        }?>
        </option>
        </select>

drop-down code

<select name="catz_name" onchange="showCat(this.value)">                                             
<option selected=\"selected\"></option>
<?php $profile_num=0;
$profile_result=mysql_query("SELECT * FROM main_cat order by id desc");                                                 $profile_num=mysql_num_rows($profile_result);
$i = 0;
while($i < $profile_num) 
{//$id = mysql_result($profile_result,$i,"id");
$catz_name=mysql_result($profile_result,$i,"catz_name");
echo"<option value='$catz_name'>$catz_name</option>";
$i++;
}?>
</select>

<div id="catHint" class="pull-left"></div>

choosen.proto?

Where is this in the code? I'm assuming it's js

If you inject soemthing into the DOM after the script has passed over it and added functionality to a certain node, then it probably won't work. If this is the case - and I haven't checked your code - you may find the jquery 'on()' method useful.

You may find this useful (or not)...

http://diafol.blogspot.co.uk/2013/01/bind-events-to-dynamically-added.html

[accra]

yes, its a .js file. The problem is that my code works fine, but when the results is returned, i lose the styling.the result becomes a normal drop down.

I notic from my search, that losts of ppl have the same problem. I wish i can find a solution to it and help those ppl.

Your example is good, but abit complex for my level...

[accra]

Here seems to be an example Click Here

but i don't know how to put it together

This seems to be js not a php issue. How about asking in that forum?

[accra]

thanks ,i will try there. I did here becouse i'm populating the drop down with php/mysql.