javascript - 动态输入表 : Cannot find option id because of undefined length of input object

Question

嘿，我正在尝试创建一个动态表，但我无法读取列表中选项的长度。我是新手，所以我想我遗漏了一些简单的东西，但出于某种原因，我在网上找到的任何东西都不适用于我，也没有我不使用也不会立即使用的 JQuery 东西。请仅使用常规 javascript 回答。

<form action="/HTMLtoPDF.php" method="post">
<datalist id="PartNum">
    <select id="PartNum2">
        <option value = "929_460MHz" class = "PgrSys" id = "Apollo Gold" >Apollo Gold</option>
        <option value = "0100-2701" class = "PgrSys" id = "SPS-5v9S" selected = "selected">SPS-5v9S</option>
        <option value = "PGRM" id = "924/Gold/Pilot/TP-200 Programmer">924/Gold/Pilot/TP-200 Programmer</option>
    </select>
</datalist>
<input type="button" name="LineButton" value="Add Line Item" onClick="NewLineItem()"> &emsp;<input type="button" name="LineButton2" value="Remove Line Item" onClick="RemoveLineItem()"><br><br>

<div id="Line">

    <table style="width: 60%;" border = "2" id="order">
        <tbody>
            <tr>
                <td>Line Item</td>
                <td>Qty.</td>
                <td>Part Num.</td>
                <td>Product</td>
                <td>Comments/Customizations</td>
                <td>Extra Fields</td>
            </tr>
        </tbody>
    </table>

</div>

<br><br><input type = "submit">


<script>

var LineItemId = 0;

function getComboA(selectObject) {
var opt;
for ( var i = 0, len = selectObject.options.length; i < len; i++ ) {
    opt = selectObject.options[i];
    if ( opt.selected === true ) {
        break;
    }
}
console.debug(opt)
return opt;
}   

function NewLineItem() {
LineItemId++;
var table = document.getElementById("order");
var row = table.insertRow(-1);
var LineId = row.insertCell(0);
var Qty = row.insertCell(1);
var QtyE = document.createElement("input");
QtyE.type = "text";
QtyE.name="qty" + LineItemId.toString();
var Part = row.insertCell(2);
var PartE = document.createElement("input");
PartE.type = "text";
PartE.setAttribute("list", "PartNum");
PartE.name = "part" + LineItemId.toString();
PartE.id = "part" + LineItemId.toString();
PartE.setAttribute("onblur", "ProductText(" + LineItemId.toString() + ", getComboA(this) )");
var Product = row.insertCell(3);
var Cust = row.insertCell(4);
var CustE = document.createElement("input");
CustE.type = "text";
CustE.name = "cust" + LineItemId.toString();
var Extra = row.insertCell(5);
LineId.innerHTML = LineItemId;
Qty.appendChild(QtyE);
Part.appendChild(PartE);
Product.innerHTML = "";
Cust.appendChild(CustE);

}

function ProductText(x,y) {
var table = document.getElementById("order");
var cell = table.rows[x].cells[3];
cell.innerHTML = y.id;
}

function RemoveLineItem() {

if(LineItemId > 0){
document.getElementById("order").deleteRow(-1);
LineItemId--;
    }
else {

}
}</script>

</form>

记住没有 JQuery，我现在没有时间学习它。

Answer 1

嘿，我发现我试图找到错误变量的长度抱歉。这是我更改为的答案:

function getComboA(selectObject) {
var data = document.getElementById("PartNum2");
var value2 = selectObject.value;  
var opt;
var opt2; 
for ( var i = 0, len = data.options.length; i < len; i++ ) {
opt = data.options[i].value;
if ( opt == value2 ) {
    opt2 = data.options[i].id;
    return opt2;
    break;
}
}
}