如何获取HTML表值并分配到选择和输入文本字段？

Question

I hope you all of fine, I've been facing problem to get data from HTML tables into Select Box.

I'm using Php MySQLi and Ajax Using Jquery to Perform the operations such as Insert, Update, Delete and View. I completed two processes such as Insert, and Display Data on the Tables, But I can't getting HTML tables and to assign in HTML Tags Select Box.

I have used Foreign Key References to Make Relationship between Category and Also Product Tables. I want to get Category_Name from product table and assign a selected category_name into HTML Select Box.

Here is Php Function

 // Get Product Data
       function get_product_record()
       {
        global $con;
        $Pro_Update_Id = $_POST['Pro_Update_ID'];
        $query = "select * from product where Product_ID='$Pro_Update_Id'";
        $result = mysqli_query($con,$query);

        while($row=mysqli_fetch_assoc($result))
        {
            $data = "";
            $data[0]=$row['Product_ID'];
            $data[1]=$row['Category_ID'];
            $data[2]=$row['Product_Name'];
            $data[3]=$row['Product_Qty'];
            $data[4]=$row['Price'];
            $data[5]=$row['Description'];
        }
            echo json_encode($data);
       }

Here is jQuery File

function get_pro_record()
{
    $(document).on('click','#p_btn_edit',function()
    {
        var GetPID = $(this).attr('data-id');
        
        $.ajax(
            {
                url: 'includes/products/get_pro_record.php',
                method: 'post',
                data:{Pro_Update_ID:GetPID},
                dataType: 'JSON',
                success:function(data)
                {
                    $('#product_id').val(data[0]);
                    $('#cat_up_id').val(data[1]);
                    $('#product_up_name').val(data[2]);
                    $('#up_Qty').val(data[3]);
                    $('#up_Price').val(data[4]);
                    $('#up_description').val(data[5]);
                    $('#products_update').modal('show');
                }
            })
    })
}

**Here is HTML Form **

<form>
 <input type="hidden" id="product_id" class="form-control my-2" placeholder=" Product Name">
 <select name="cat_up_id"></select>
 <input type="text" id="product_up_name" class="form-control my-2" placeholder=" Product Name">
 <input type="text" id="up_Qty" class="form-control my-2" placeholder=" QTY">
 <input type="text" id="up_Price" class="form-control my-2" placeholder=" Price ">
 <textarea id="up_description" class="form-control" placeholder="Description"></textarea>
 </form>

I'm receiving complete data into console screen, but I can't see category_name I'm receiving category_id. So Please tell me What Can I do to solve the problem.

Here is Output of the Project in Console Project Output in Console

</div>

Answer 1

First you need to query database from both Product and Category table using Inner Join

$query = "select a.*, b.Category_Name from product a, category b where a.Category_Id = 
          b.Category_Id and Product_ID='$Pro_Update_Id'";

then you need to add $data with one more element for Category Name

 $data[6]=$row['Category_Name'];

then you need to add options item to select

 $('#cat_up_id').html('<option>' + data[6] + '</option>');    

and, replace attribute name="cat_up_id" with id="cat_up_id" in select tag