如何使用jQuery和PHP发送动态选项文本和值

Question

I have design a dynamic html table and it contains 2 table columns : 我设计了一个动态的html表，它包含2个表列：

column1: Item Name. column1：项目名称。 It comes from selected option. 它来自选定的选项。
column2: Item Price. column2：项目价格。 It comes from selected option value. 它来自选定的选项值。

Right now I am selecting option in first column and passing value into input field in second column. 现在，我在第一栏中选择选项，然后将值传递到第二栏中的输入字段中。 After adding as many rows I need, I want to pass both their text and value in php. 添加所需的行数后，我想在php中传递它们的text和value 。

But php is getting only option value instead of having both text and value. 但是php仅获得选项值，而不同时具有文本和值。

Here is my code 这是我的代码

 $('#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>

Here is php code: 这是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

For DESCRP[0] = item-1, DESCRP[1] = item-5 modify the select as follows : 对于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

You mean 你的意思是

<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>

using 使用

$('#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 个解决方案

解决方案1
1 2016-02-12 06:33:36

解决方案2
1 已采纳 2016-02-12 06:34:02

如何使用jQuery和PHP发送动态选项文本和值

问题描述

2 个解决方案

解决方案1 1 2016-02-12 06:33:36

解决方案2 1 已采纳 2016-02-12 06:34:02

解决方案1
1 2016-02-12 06:33:36

解决方案2
1 已采纳 2016-02-12 06:34:02