如何获取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

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

Answer 2

Sonal Bonkar是正确的，您需要在这里进行表联接。在这种情况下，您需要将值作为ID来存储在表中

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