JAVASCRIPT如何在“选择选项”中获取多个值

时间:2017-09-01 10:57:29

标签: javascript php arrays html5

这是我的代码,完美无缺。但问题是,当我按下添加按钮时,新添加的选项选项具有我需要的名称为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);            
}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我使用id为id的第二个变量。 并以选项值打印。 它有效。

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