JAVASCRIPT 如何在选择选项中获得多个值

Question

这是我的代码，可以完美运行。但问题是当我按下添加按钮时，新添加的选择选项具有我需要的名称和 ID 的值。

那么如何将 Id 传递给 option.value = array[i]; ？

var array = ["PACKING & LOADING","BAG GODOWN","MRP","HOUSE KEEPING"];

我将 SQL 数据编码为 json，这是使用 PHP json_encode 获取的。

简而言之，我需要 Id 而不是选择框中的值。

function addBillField (argument) {
    var myTable = document.getElementById("myTable");
    var currentIndex = myTable.rows.length;
    var currentRow = myTable.insertRow(-1);
    
    var ip1 = document.createElement("select");
    
    //THIS VALUE CAME FROM PHP
    var array = ["PACKING & LOADING","BAG GODOWN","MRP","HOUSE KEEPING"];
    
    //DONT REMOVE THIS SPACE
    ip1.setAttribute("name", "billcategory" + currentIndex);
    ip1.setAttribute("class", "form-control");
    ip1.name="billcategory[]";

    //Create and append the options
    myTable.appendChild(ip1); 
    

    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.value = array[i];
        option.text = array[i];
        ip1.appendChild(option);
    }

    var ip2 = document.createElement("input");
    ip2.setAttribute("name", "billnumber[]" + currentIndex);
    ip2.setAttribute("class", "form-control");

    var ip3 = document.createElement("input");
    ip3.setAttribute("name", "billamount[]" + currentIndex);
    ip3.setAttribute("class", "form-control");

    var ip4 = document.createElement("input");
    ip4.setAttribute("name", "billgst[]" + currentIndex);
    ip4.setAttribute("class", "form-control");

    var ip5 = document.createElement("input");
    ip5.setAttribute("name", "billtotal[]" + currentIndex);
    ip5.setAttribute("class", "form-control");

    var addRowBox = document.createElement("input");
    addRowBox.setAttribute("type", "button");
    addRowBox.setAttribute("value", "Add More");
    addRowBox.setAttribute("onclick", "addBillField();");
    addRowBox.setAttribute("class", "btn");

    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(ip1);
    currentCell.colSpan = 2;

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(ip2);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(ip3);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(ip4);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(ip5);             

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(addRowBox);            
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table webtbl" id="myTable">
     <thead>
         <tr align="left" style="background-color: grey;color: white;">
             <th colspan="7"><span>BILL DETAILS:</span></th>
         </tr>
         <tr>
             <th colspan="2" width="25%">Bill Category</th>
             <th width="18%">Bil No.</th>
             <th width="18%">Bill Amount</th>
             <th width="18%">G.S.T</th>
             <th width="18%">Total</th>
             <th width="3%"></th>
         </tr>
     </thead>

     <tbody>
         <tr>
             <td colspan="2">
                 <select class="form-control" name="billcategory[]">
                     <option value="">Select Bill Category</option>
                     <?php
                         $query6 = $conn->query("select * from bill_category where status = 1");
                         while($get_bil_cat = $query6->fetch_array()){
                             echo "<option value='$get_bil_cat[0]'>$get_bil_cat[1]</option>";
                            }
                     ?>
                </select>
            </td>
            <td>
                <input type="text" class="form-control" name="billnumber[]" placeholder="Bill Number">
            </td>
            <td>
                <input type="text" class="form-control" name="billamount[]" placeholder="Bill Amount">
            </td>
            <td>
                <input type="text" class="form-control" name="billgst[]" placeholder="Bill GST">
            </td>
            <td>
                <input type="text" class="form-control" name="billtotal[]" readonly="" placeholder="000">
            </td>
            <td align="center">
                <input type="button" class="btn btn-default" value="Add" onclick="addBillField();">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您在 echo "<option value='$get_bil_cat[0]'>$get_bil_cat[1]</option>"; 行的 echo 语句中使用了 PHP 变量.在这种情况下，PHP 将变量解释为字符串。因此，您应该需要连接变量以显示值。使用 echo "<option value=".$get_bil_cat[0].">".$get_bil_cat[1]."</option>"; .