Question

我设计了一个动态html表，它包含2个表列：

column1：项目名称。它来自选定的选项。
第2栏：商品价格。它来自选定的选项值。

现在我在第一列中选择选项并将值传递到第二列的输入字段。添加我需要的行后，我想在php中传递text和value。

但是php只获取选项值而不是文本和值。

这是我的代码

$('#myTable').on('change', '.mySelect', function() {
// you can use .closest() to find
// particular input on same row with select
$(this).closest('tr').find('.amount').val($(this).val());
//$(this).closest('tr').find('.mySelect').val($(".mySelect option:selected").text());  
});

$('#myTable').on('click','.remScnt', function(e) { 
e.preventDefault();
// find the tr element of remove link
// which is a parent
$(this).closest('tr').remove()
});

$(".mySelect option").filter(function() {
//may want to use $.trim in here
return $(this).text() == $(this).val(); 
}).prop('selected', true);

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <style>
         table, th, td {
         border-collapse: collapse;
         margin: 10px auto;
         }
      </style>
      <script>
         function addMore() {
             var table = document.getElementById("myTable");
             var row = table.insertRow(-1);
             var cell1 = row.insertCell(-1);
             var cell2 = row.insertCell(-1);
         
         var x = document.getElementById("myTable").rows[1].cells;
            
             cell1.innerHTML =  x[0].innerHTML;
             cell2.innerHTML = x[1].innerHTML;
         }
         
         
         function removeLast() {
             document.getElementById("myTable").deleteRow(-1);
         }
         
         function removeRowNo() {
         var index = document.getElementById('value').value
             document.getElementById("myTable").deleteRow(index);
         }
      </script>
   </head>
   <body>
      <form  action="testlist.php" method="post">
         <table>
            <tr>
               <td>
                  Month:  
               </td>
               <td>
                  <select name="SALMT" id="month" onchange="" size="1">
                     <option value="" disabled selected>Month</option>
                     <option value="1">January</option>
                     <option value="2">February</option>
                     <option value="3">March</option>
                     <option value="4">April</option>
                     <option value="5">May</option>
                     <option value="6">June</option>
                     <option value="7">July</option>
                     <option value="8">August</option>
                     <option value="9">September</option>
                     <option value="10">October</option>
                     <option value="11">November</option>
                     <option value="12">December</option>
                  </select>
               </td>
               <td>
                  Year:
               </td>
               <td> <input type="text" name="SALYR">
               </td>
            </tr>
            <tr>
               <td>
                  Employee ID:
               </td>
               <td> <input type="text" name="EMPID">
               </td>
               <td>
                  Name: 
               </td>
               <td><input type="text" name="NM">  
               </td>
            </tr>
            <tr>
               <td>
                  Department Code:
               </td>
               <td> <input type="text" name="DPTID">
               </td>
               <td>
                  Designation: 
               </td>
               <td><input type="text" name="DSG"> 
               </td>
            </tr>
         </table>
         <table id="myTable">
            <tr>
               <th>Items</th>
               <th>Amount</th>
            </tr>
            <tr>
               <td >
                  <a href="#" class="remScnt">Remove</a> 
                  <select class="mySelect" name="DESCRP[]" >
                     <option  disabled="" selected="">Select</option>
                     <option  value="100">Item-1</option>
                     <option  value="200">Item-2</option>
                     <option  value="300">Item-3</option>
                     <option  value="400">Item-4</option>
                     <option  value="500">Item-5</option>
                  </select>
               </td>
               <td> <input type="text" class="amount" name="ALAMT[]"></td>
            </tr>
         </table>
         <table>
            <tr>
               <td><input type="submit" /> </td>
            </tr>
         </table>
      </form>
      <br>
      <table>
         <tr>
            <td><button onclick="addMore()">Add More</button></td>
            <td><button onclick="removeLast()">Remove Last Row</button></td>
         </tr>
         <tr>
            <td><input type="text" maxlength="3" name="value" id='value'></td>
            <td><button onclick="removeRowNo()">Remove By Row No.</button></td>
         </tr>
      </table>
   </body>
</html>

这是php代码：

<?php
var_dump($_POST);
echo "<br>";
echo count($_POST["DESCRP"]);
foreach ($_POST["DESCRP"] as $d) {
    echo "<br>";
    echo $d;

}

echo "<br>Amount:";
echo count($amount = $_POST["ALAMT"]);
foreach ($_POST["DESCRP"] as $a) {
    echo "<br>";
    echo $a;

}

?>

Answer 1

DESCRP[0] = item-1, DESCRP[1] = item-5 修改选择如下：

<option value="Item-1" data-val="100">Item-1</option>

$('#myTable').on('change', '.mySelect', function() {

$(this).closest('tr').find('.amount').val($(this).attr('data-val'));

});

Answer 2

你的意思是

<td>
  <select class="mySelect">
    <option value="">Select</option>
    <option value="100">Item-1</option>
    <option value="200">Item-2</option>
    <option value="300">Item-3</option>
    <option value="400">Item-4</option>
    <option value="500">Item-5</option>
  </select>
  <input type="hidden" class="descr" name="DESCRP[]" />
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>

使用

$('#myTable').on('change', '.mySelect', function() {
  $(this).closest('tr').find('.amount').val($(this).val());
  $(this).closest('tr').find('.descr').val($("option:selected",this).text());  
});

如何使用jquery和php发送动态选项文本和值

2 个答案: