如何使用AJAX填充下拉列表

Question

當我單擊下拉列表時，我想填充一個下拉列表（AJAX）。 我有一個下拉類別和一個“添加類別”按鈕

第一次打開頁面時，我可以在下拉列表中看到我的類別。 如果要包括其他類別，請單擊“添加類別”，然后插入新類別。 之后，如果我單擊下拉列表，則必須看到我的新類別。

怎么做 ？

我不知道該怎么創建。

謝謝

my_ajax_file.php

 $Qcheck = $OSCOM_Db->prepare('select categories_id as id,
                                      categories_name as name
                               from :table_categories');
 $Qcheck->execute();
 $list = $Qcheck->rowCount();
 if ($list > 0) {
   $array = [];
   while ($value =  $Qcheck->fetch() ) {
     $array[] = $value;
   }

   # JSON-encode the response
   $json_response = json_encode($array); //Return the JSON Array

   # Return the response
   echo $json_response;

HTML代碼

 <script type="text/javascript">
   function Mycategory_id() {
     $("#myAjax").on('click', function(){
       $.ajax({
         url: 'http://www.my_ajax_file.php',
         dataType: 'json',
         success: function(data){
           //data returned from php
         }
       });
     });
   }
 </script>

 <select name="category_id" id="Mycategory_id" class="form-control">
   <option value="0" selected="selected">Haut</option>
   <option value="23">Panneaux Signalétique</option>
   <option value="20">Signalétique Camping</option>
   <option value="22">&nbsp;&nbsp;&nbsp;Barrières</option>
   <option value="21">&nbsp;&nbsp;&nbsp;Entrée</option>
 </select>
 <input type="hidden" name="current_category_id" value="0" /></div>

Answer 1

您需要使用新選項更新select元素。

<script type="text/javascript">
  function Mycategory_id() {
    $("#myAjax").on('click', function(){
      $.ajax({
        url: 'http://www.my_ajax_file.php',
        dataType: 'json',
        success: function(data){
          //data returned from php
          var options_html = '';
          for(index in data){
            var category_id = data[index]['categories_id'];
            var category_name = data[index]['categories_name'];
            options_html += '<option value="'+category_id+'">' + category_name + '</option>';

          }
          $('#category_id').html(options_html);
        }
      });
    )};
</script>

為了簡化渲染，您可以使用mustache.js