我无法保存特定的选定值。 它保存了数据库中的所有数据

Question

i am inserting multiple data. what happen is when i select a project from drop down list. it save all data from selection. please check the image below first

    function sample($con){
  $select = "SELECT * FROM project_tbl";
  $select_result = mysqli_query($con,$select);
    if (mysqli_num_rows($select_result)> 0) {
      while ($row = mysqli_fetch_assoc($select_result)) {
        echo "<option value=".$row['project_name'].">" .$row['project_name']."</option>";
      }
    }
  }

*html codes (i used drop down list to populate data from database)

<td class="pro">
  <select class="pro">
  <option value=""><?php sample($con); ?></option>
  </select>   
</td>

*ajax codes (adding, saving and removing)

$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
  html_code += "<td class='pro'><select class='pro'><option value=''><?php sample($con); ?></option></select></td>";
  html_code += "<td contenteditable='true' class='desc'></td>";
  html_code += "<td contenteditable='true' class='comp'></td>";
  html_code += "<td contenteditable='true' class='entry'></td>";
  html_code += "<td contenteditable='true' class='remarks'></td>";
  html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-outline-danger btn-xs remove' title='remove'><i class='fa fa-times' aria-hidden='true'></i></button></td>";
  html_code += "</tr>";  
  $('#crud_table').append(html_code);
 });

  $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#' + delete_row).remove();
 });

  $('#save').click(function(){
    var desc = [];
    var pro = [];
    var comp = [];
    var entry = [];
    var remarks = [];

    $('.desc').each(function(){
    desc.push($(this).text());
    });
    $('.pro').each(function(){
    pro.push($(this).text());
    });
    $('.comp').each(function(){
    comp.push($(this).text());
    });
    $('.entry').each(function(){
    entry.push($(this).text());
    });
    $('.remarks').each(function(){
    remarks.push($(this).text());
    });
    $.ajax({
      url:"insert_inspection.php",
      method:"POST",
      data:{desc:desc, pro:pro, comp:comp, entry:entry, remarks:remarks},
      success:function(data){
        alert(data);
        $("td[contentEditable='true']").text("");
        $('select').prop('selectedIndex',0);
        for(var i=2; i<= count; i++){
          $('tr#'+i+'').remove();
        }
      }
    });
  });
});

Here is what happen when I save.

database

I am new in PHP.

insert_inspection.php

<?php
$con = mysqli_connect("localhost", "root", "", "pms");
if (isset($_POST["desc"])){
  $desc = $_POST["desc"];
  $pro = $_POST["pro"];
  $comp = $_POST["comp"];
  $entry = $_POST["entry"];
  $remarks = $_POST["remarks"];
  $query = '';

  for($count = 0; $count<count($desc); $count++){
    $desc_clean = mysqli_real_escape_string($con, $desc[$count]);
    $pro_clean = mysqli_real_escape_string($con, $pro[$count]);
    $comp_clean = mysqli_real_escape_string($con, $comp[$count]);
    $entry_clean = mysqli_real_escape_string($con, $entry[$count]);
    $remarks_clean = mysqli_real_escape_string($con, $remarks[$count]);

    if($desc_clean != '' && $pro_clean != '' && $comp_clean != '' && $entry_clean != '' && $remarks_clean != ''){
      $query .= 'INSERT INTO `inspection_tbl`(`description`, `project_name`, `completion`, `entry`, `remarks`) VALUES("'.$desc_clean.'", "'.$pro_clean.'", "'.$comp_clean.'", "'.$entry_clean.'", "'.$remarks_clean.'"); 
        ';
    }
  }
  if($query != ''){
    if(mysqli_multi_query($con, $query)){
      echo 'Item Data Inserted';
    }else{
      echo 'Error';
    }
  }else{
    echo 'All Fields are Required';
  }
}
?>

Answer 1

it is saved as such because your select element only has one option value

modify it from:

<td class="pro"> <select class="pro"> <option value=""><?php sample($con); ?></option> </select> </td>

to:

<td class="pro">
    <select class="pro">
        <option value=""></option>
        <?php sample($con); ?>
    </select> 
</td>

and modify your select element handler to push only your selected item

something like this:

$('.pro').each(function(){ 
    if($(this).prop("selected")) { 
        pro.push($(this).text()); 
    }
});

or modify this part to something like:

$(".pro > option:selected").each(function(){
    pro.push($(this).text());
});