javascript - 从数据库获取数据并将其放在选择列表中

我正在使用JavaScript和HTML进行更新。我想把这些值放在下拉列表中。但我无法将所有其他数据循环到下拉列表中。我想在其中创建一个包含所有值的HTML下拉菜单，以便可以从下拉菜单中选择其他选项。我正在从数据库中获取以前的值。我怎样才能得到剩下的类别以及在选项？
控制器

public function productlist($product_id)
{
    $this->load->model('Productmodel');
    $response=array();
    $response = $this->Productmodel->getproductlistbyid($product_id);
    echo json_encode($response);
}

模型

public function getproductlistbyid($product_id)
{
    $returnarray = array();

    $sql = "select id, product_name, image,  b.name as bname, c.name as cname, a.category_id as acategory_id, a.subcat_id as asubcat_id, description, qty, color, orginal_price, offer_price from tbl_product as a inner JOIN category as b on a.category_id = b.category_id inner JOIN category as c on a.category_id = c.fk_parent_id where id = ?";

    $query = $this->db->query($sql, array($product_id));

    if($query->num_rows())
    {
        $rows = $query->result();

        foreach($rows as $temp)
        {
            $returnarray[0] = $temp->id;
            $returnarray[1] = $temp->product_name;
            $returnarray[2] = $temp->image;
            $returnarray[3] = $temp->bname;
            $returnarray[4] = $temp->cname;
            $returnarray[5] = $temp->description;
            $returnarray[6] = $temp->qty;
            $returnarray[7] = $temp->color;
            $returnarray[8] = $temp->orginal_price;
            $returnarray[9] = $temp->offer_price;
            $returnarray[10] = $temp->acategory_id;
            $returnarray[11] = $temp->asubcat_id;
        }

    }

    return $returnarray;

}

视图（脚本）

 <script>
 function editproduct(product_id)
 {
 var myurl="<?php echo base_url();?>index.php?/Product/productlist/"+product_id;

//alert(myurl);

  $.post(myurl).done(function (data)
  {
     //alert(data);

      var obj=jQuery.parseJSON(data);
    //alert(obj);

      //alert(myhtml);
      var myhtml='<form role="form" id="formedit" action="#">'+
                 '<div class="box-body">'+
                 '  <div class="form-group">'+
                 '  <label for="exampleInputName">Product Name</label>'+
                 '  <input type="hidden"  id="upmyid" name="editid" value="'+obj[0]+'">'+
                 '  <input type="text" class="form-control" id="upname" placeholder="Product Name" name="editpname" value="'+obj[1]+'">'+
                 '  </div>'+
                 '</div>'+
       '<div class="box-body">'+
       '<div class="form-group">'+
       '<label for="exampleInputImage">Image</label>'+
       '<input type="file" class="form-control" id="upimage" placeholder="Image" name="editpimage" value="'+obj[2]+'">'+
       '</div>'+
       '</div>'+
       '<div class="box-body">'+
       '<div class="form-group">'+
       '<label for="exampleInputCategory">Category</label>'+
       '<select class="form-control select category" style="width: 100%;" name="option2" id="option2">'+
       '<option value="0">Main Menu </option>'+
       '<option value="'+obj[9]+'" selected>'+obj[3]+'</option>'+
       '</div>'+
       '</div>'+
                 '</form>';

                 swal({ title: "Edit <small>this</small>!",
                        text: myhtml,
                        html: true,
                        type: "",   showCancelButton: true,   confirmButtonColor: "#3c8dbc",
                        confirmButtonText: "Update Now",
                        closeOnConfirm: false },
                        function()
                        {
                            var id=$('#upmyid').val();
                            var name=encodeURIComponent($('#upname').val());
                            var myurl="index.php/Product/updateProduct/"+id+"/"+name;

                            $.post(myurl).done(function(data)
                            {
                                //alert(data);

                                var obj = jQuery.parseJSON(data);

                                //alert(obj);

                                if(obj[0]==100)
                                {

                                    swal({      title: "Updated Successfully",
                                    text: "Click on ok now!",
                                    type: "success",   showCancelButton: false,   confirmButtonColor: "#3c8dbc",
                                    confirmButtonText: "OK",
                                    closeOnConfirm: false },

                                    function()
                                    {
                                        location.reload();
                                    });
                                }

                                else
                                {
                                    swal("Sorry!",
                                    "Unable to Update now.",
                                    "warning");
                                }

                            });

                        }
                    );
  });
  }
  </script>

最佳答案

每次在PHP中运行foreach行时，它都会用最新的值重写数组的相同部分。例如，如果有10行从数据库返回，则循环运行10次。因此，用最新值$mainarray[0]替换10次$temp->id;，对于所有其他字段也是如此。这意味着您只能将最后一个DB行的值获取到PHP数组中。
像这样尝试（未经测试，对任何小错误表示歉意）：
型号：

    foreach($rows as $temp)
    {
        $returnarray[] = $temp;
    }

这将把整个$temp对象放入$mainarray的下一个可用索引中。
其次，JavaScript代码没有设置为处理响应中的多个项，因此将只打印一个数据项，即使要返回许多项。
查看
1）删除此行：

  var obj=jQuery.parseJSON(data);

在您的PHP中应该不需要这个-$json_encode()将已经返回一个JSON对象，而不是一个字符串，所以您不需要解析它。jQuery将理解data已经是一个JSON对象。
2）像这样更新HTML生成代码（更改是它呈现<select>的地方）。它需要遍历data数组并为数组中的每个对象创建一个<option>。

      var myhtml='<form role="form" id="formedit" action="#">'+
             '<div class="box-body">'+
             '  <div class="form-group">'+
             '  <label for="exampleInputName">Product Name</label>'+
             '  <input type="hidden"  id="upmyid" name="editid" value="'+obj[0]+'">'+
             '  <input type="text" class="form-control" id="upname" placeholder="Product Name" name="editpname" value="'+obj[1]+'">'+
             '  </div>'+
             '</div>'+
   '<div class="box-body">'+
   '<div class="form-group">'+
   '<label for="exampleInputImage">Image</label>'+
   '<input type="file" class="form-control" id="upimage" placeholder="Image" name="editpimage" value="'+obj[2]+'">'+
   '</div>'+
   '</div>'+
   '<div class="box-body">'+
   '<div class="form-group">'+
   '<label for="exampleInputCategory">Category</label>'+
   '<select class="form-control select category" style="width: 100%;" name="option2" id="option2">' +
   '<option value="0">Main Menu </option>';
$.each(data, function(index, obj) {
  myhtml += '<option value="' + obj.acategory_id + '">' + obj.cname + '</option>';
});
 myhtml += '</select>' +
   '</div>'+
   '</div>'+
'</form>';