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

如何使用AJAX填充下拉列表

1 个答案: