Question

关注点：我正在尝试在<select></select>上插入所选数据。但是只有第一个<option></option>正在添加到我的数据库中。

场景：：我有一个用于添加数据的引导程序模式，并且循环了<select></select>。但是同样，当我尝试插入所有数据时，仅第一个<option></option>和第二行插入<select></select>上的所有项目。

HTML代码：（MODAL）

<div class="modal fade" id="myModal" role="dialog">
      <!-- Modal content-->
      <div class="modal-contenteud">
        <table class="ELTable">
            <tr>
              <td style="width: 85%">EUD NUMBER: ----- </td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%">COMPANY NAME:</td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%"><input class="POtxtbx" type="text" placeholder="ENTER COMPANY" id="EUDCompany"/></td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%">CONTACT PERSON:</td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%"><input class="POtxtbx" type="text" placeholder="ENTER CONTACT PERSON" id="EUDContact"/></td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
                <td>
                    <table class="PDEATable" id="crud_table">
                             <tr>
                              <td style="width: 85%" colspan="2">PDEA:</td>
                             </tr>
                             <tr>
                              <td>
                                <select class="PdeaSelect" id="PDEALIST">
                                    <option>--SELECT PDEA--</option>
                                    <option>ACETONE</option>
                                    <option>SULFURIC ACID</option>
                                    <option>HYDROCLHORIC ACID</option>
                                    <option>ETHYL METHYL KETON</option>
                                    <option>ETHYL ETHER</option>
                                    <option>TOLUENE</option>
                                </select>
                              </td>
                              <td><button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button></td>
                             </tr>
                    </table>
                            <br />
                            <div id="inserted_item_data">
                            </div>
                </td>
            </tr>
        </table>
    <br />
    <div id="inserted_item_data"></div>
    <div align="right">
     <button type="button" name="SaveButton" id="save" class="btn btn-info">Save</button>
    </div>
   </div>
</div>

脚本：

$(document).ready(function(){
    var count = 1;
    $("#AddNewComp").click(function(){
        $("#myModal").modal();
    });          
    $('#add').click(function(){
       count = count + 1;
       var html_code = "<tr id='row"+count+"'>";
       html_code += "<td><select class='PdeaSelect' id='PDEALIST'><option>--SELECT PDEA--</option><option>ACETONE</option><option>SULFURIC ACID</option><option>HYDROCLHORIC ACID</option><option>ETHYL METHYL KETON</option><option>ETHYL ETHER</option><option>TOLUENE</option></select></td>";
       html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</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 PdeaSelect = [];
        var EUDComp = $('#EUDCompany').val();
        var EUDCont = $('#EUDContact').val();      
        $('.PdeaSelect').each(function(){
            PdeaSelect.push($(this).text());
        });
        $.ajax({
           url:"EUDInsert.php",
           method:"POST",
           data:{PdeaSelect:PdeaSelect, EUDComp:EUDComp, EUDCont:EUDCont},
           success:function(data){
                alert(data);
                $("#EUDCompany").text("");
                $("#EUDContact").text("");
                for(var i=2; i<= count; i++)
                {
                    $('tr#'+i+'').remove();
                }
                fetch_item_data();
               }
            });
            $("#myModal").modal('hide');
        });    
    });

SQL代码：

<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "db_is");

if(isset($_POST["PdeaSelect"]))
{
   $PdeaSelect = $_POST["PdeaSelect"];    
   $query = '';    
   for($count = 0; $count<count($PdeaSelect); $count++)    
   {
       $item_pdea = mysqli_real_escape_string($connect, $PdeaSelect[$count]);
       $eudcompp = mysqli_real_escape_string($connect, $_POST["EUDComp"]);
       $eudcontt = mysqli_real_escape_string($connect, $_POST["EUDCont"]);
       $Date = date('Y-m-d', strtotime('+1 years'));

       if($item_pdea != '')
       {
           $query .= 'INSERT INTO table_eud(EUD_NUMBER, EUD_COMPANY,EUD_CONTACT, EUD_PDEA, EUD_DATE, EUD_STATUS) VALUES("'. "SAMPLENUMBER".'", "'.$eudcompp.'", "'.$eudcontt.'", "'.$item_pdea.'", "' .Date.'", "' . "ACTIVE". '");';
       }
   }
   if($query != '')
   {
      if(mysqli_multi_query($connect, $query))
      {
         echo 'Item Data Inserted';
      }
      else
      {
         echo 'Error';
      }
    }
    else
    {
       echo 'All Fields are Required';
    }
 }
?>

无错误显示。预先感谢。

Answer 1

Appart来自select元素的重复ID，您的主要问题在这里：

$('.PdeaSelect').each(function(){
     PdeaSelect.push($(this).text());
});

您没有抓住所选的options，请改用此

$('.PdeaSelect option:selected').each(function(){
     PdeaSelect.push($(this).text());
});

请参阅：https://api.jquery.com/selected-selector/

演示

$(document).ready(function(){
         var count = 1;

        $("#AddNewComp").click(function(){
            $("#myModal").modal();
        });

         $('#add').click(function(){
          count = count + 1;
          var html_code = "<tr id='row"+count+"'>";
           html_code += "<td><select class='PdeaSelect' id='PDEALIST'_" + count +"><option>--SELECT PDEA--</option><option>ACETONE</option><option>SULFURIC ACID</option><option>HYDROCLHORIC ACID</option><option>ETHYL METHYL KETON</option><option>ETHYL ETHER</option><option>TOLUENE</option></select></td>";
           html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</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 PdeaSelect = [];
              var EUDComp = $('#EUDCompany').val();
              var EUDCont = $('#EUDContact').val();



              console.log($('.PdeaSelect option:selected').length);
              
              $('.PdeaSelect option:selected').each(function(){
               PdeaSelect.push($(this).text());
              });
              
              $("#options").html(PdeaSelect.join(", "));

              /*$.ajax({
               url:"EUDInsert.php",
               method:"POST",
               data:{PdeaSelect:PdeaSelect, EUDComp:EUDComp, EUDCont:EUDCont},
               success:function(data){
                alert(data);
                $("#EUDCompany").text("");
                $("#EUDContact").text("");
                for(var i=2; i<= count; i++)
                {
                 $('tr#'+i+'').remove();
                }
                fetch_item_data();
               }
              });
              $("#myModal").modal('hide');*/
        });

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal fade" id="myModal" role="dialog">
      <!-- Modal content-->
      <div class="modal-contenteud">
        <table class="ELTable">
            <tr>
              <td style="width: 85%">EUD NUMBER: ----- </td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%">COMPANY NAME:</td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%"><input class="POtxtbx" type="text" placeholder="ENTER COMPANY" id="EUDCompany"/></td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%">CONTACT PERSON:</td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
              <td style="width: 85%"><input class="POtxtbx" type="text" placeholder="ENTER CONTACT PERSON" id="EUDContact"/></td>
              <td style="width: 15%"></td>
             </tr>
             <tr>
                <td>
                    <table class="PDEATable" id="crud_table">
                             <tr>
                              <td style="width: 85%" colspan="2">PDEA:</td>
                             </tr>
                             <tr>
                              <td>
                                <select class="PdeaSelect" id="PDEALIST">
                                    <option>--SELECT PDEA--</option>
                                    <option>ACETONE</option>
                                    <option>SULFURIC ACID</option>
                                    <option>HYDROCLHORIC ACID</option>
                                    <option>ETHYL METHYL KETON</option>
                                    <option>ETHYL ETHER</option>
                                    <option>TOLUENE</option>
                                </select>
                              </td>
                              <td><button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button></td>
                             </tr>
                    </table>
                            <br />
                            <div id="inserted_item_data">
                            </div>
                </td>
            </tr>
        </table>
    <br />
    <div id="inserted_item_data"></div>
    <div align="right">
     <button type="button" name="SaveButton" id="save" class="btn btn-info">Save</button>
    </div>
   </div>
</div>

Selected Options: <span id="options"></span>

Answer 2

解决方案：

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

感谢您抽出时间回答我的问题...

在SQL，HTML和JQuery中选择标签问题

2 个答案: