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>
Member Avatar

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

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...

Here seems to be an example Click Here

but i don't know how to put it together

Member Avatar

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

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