数据不显示 ajax 和 javascript ci

Question

我想使用ajax，javascript snd CI php 选择选项 cat_id 在显示相关子 cat-id 但不显示数据后单击。我正在测试警报数据显示正常但没有获取 html 数据请分享宝贵的想法先生在这里分享代码..

阿贾克斯

<script>

     $(document).ready(function() {

    $('#catid').on('click', function() {

           var catid = $("#catid").val();

           $.ajax({

               url: "<?php echo base_url(); ?>get-form-detail",

               type: "post",

               data: "catid=" + catid,

                success: function(response) {

                   var res = JSON.parse(response);

                   

                  for(i=0;i<res.length;i++)

                            {

                                

                                //alert(res[i]['cat_title']);

                                

                                options +=  '<option value="' + res[i]['id'] + '">' + res[i]['cat_title'] + '</option>';

                                $('#tbl').html(options); 

                            }

                    

                 

               }

           });

       });

   });  

   </script>

查看页面

<div class="row">

                        <label class="col-sm-4 col-form-label text-right">Form Category : </label>

                        <div class="col-sm-8">

                           <div class="form-group">

                              <select class="form-control" name="formID" id="formID">

                                <div id="tbl"></div> 

                              </select>

                           </div>

                        </div>

                     </div>

Answer 1

将回调函数更改为success: function(response) {&nbsp; &nbsp; let res = JSON.parse(response);&nbsp; &nbsp; let options = res.reduce((a,v)=>(`${a}<option value = "${v['id']}">${v['cat_title']}</option>`), '');&nbsp; &nbsp; $('#formID').html(options);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}并使用此 html 代码<select class="form-control" name="formID" id="formID"></select>

Answer 2

我知道你如何使用变量选项添加更多项目，但我有另一个解决方案替换您的代码：&nbsp; &nbsp;var x = document.getElementById("yourSelectElementId");&nbsp; &nbsp;for(i=0;i<res.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var option = document.createElement("option");&nbsp; &nbsp; &nbsp; &nbsp; option.text = res[i]['id'];&nbsp; &nbsp; &nbsp; &nbsp; option.value= res[i]['id'];&nbsp; &nbsp; &nbsp; &nbsp; x.add(option);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }