Wordpress: Jquery .html function now executing inside PHP foreach loop

Question

Actually I want to display a dynamic dropdown on selection of one dropdown. Here is my html:

echo  '<select onchange="showcertificate(this.value);" value="'. $certificatelist .'" name=\'certificatelist\'>';

It is calling the function showcertficate, which is:

<script type="text/javascript">
  function showcertificate(vendorid)
  {
      var vendorid = vendorid;
      var xmlhttp = new window.XMLHttpRequest();
      xmlhttp.open("GET","admin-ajax.php?action=wpt_exam_certificatelist&u="+vendorid,true);
    xmlhttp.send();
    <?php
      if(isset($_GET["u"]))
      {
     $vendorid = $_GET['u'];
      }
      $certquery = $wpdb->get_results("SELECT * FROM wp_posts INNER JOIN wp_postmeta ON wp_posts.ID=wp_postmeta.post_id WHERE wp_posts.post_status='publish' AND wp_posts.post_type='certificate' AND wp_postmeta.meta_value='$vendorid'");
     foreach($certquery as $c)
        { ?>
    $("#cert").html('<option  name=\'certificatelist\'><?php echo $c->post_title; ?></option>');
      <?php }
      ?> 
  }
  </script>

The issue is that.html function is not executing inside foreach loop. If i remove foreach loop, it works fine. I have already waste one day in it. Please help me.

Answer 1

First, you draw wrong option it is not have attribute name it only have value attribute. Second $.html - rewrite whole inner html code, you are re-write for every each $().html - and you get only last change.

var options = '';
<?php foreach($certquery as $c) echo "options += '<option>{$c->post_title}</option>"; ?>
$("#cert").html(options);