javascript - 将 HTML 选择值放入 JavaScript 表中

Question

我正在尝试从 HTML 文档中获取多个用户输入，然后使用 Javascript 将该数据传输到表中。数字数据将毫无问题地传输，但下拉选择菜单显示为未定义，我已经尝试了许多不同的解决方案，我在此处的问题上看到过，但没有一个产生任何结果。任何人可以提供的任何帮助将不胜感激。这是相关代码...

HTML

<form class="items" action="" method="post" name="items">
            <ul>

                <li>
                    <label>Paint:</label>
                    <select id="paintColour">
                        <option value="White" selected="selected">White</option>
                        <option value="Blue">Blue</option>
                        <option value="Beige">Beige</option>
                        <option value="Red">Red</option>
                        <option value="Yellow">Yellow</option>
                    </select>
                    <select id="paintType">
                        <option value="Gloss">Gloss</option>
                        <option value="Matte">Matte</option>
                        <option value="Emulsion">Emulsion</option>
                    </select>
                    <input type="number" name="quantity" value="0" size="2" id="paintVolume">
                    <input type="button" value="Add" id="addPaint" onclick="Javascript:addPaints()">
                </li>

Javascript

function addPaints(){

var paintColour = document.getElementById("paintColour").selectedIndex;

var paintType = document.getElementById("paintType").selectedIndex;

var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");



var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);

paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}


function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}

Answer 1

您的选择问题是您正在选择索引，然后尝试获取值。相反，选择元素并获取值。

function addPaints(){

var paintColour = document.getElementById("paintColour");

var paintType = document.getElementById("paintType");

var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");



var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);

paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}


function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}