附加到具有多个输入值的列表

时间:2016-06-06 17:09:34

标签: javascript jquery append html-lists

我试图从输入框中获取值,然后将它们作为一个句子打印到列表中。从理论上讲,我觉得这应该有效,但不明白为什么不是。请帮忙!

$('add_gowns').click(function() {
var size = document.getElementById("blksize").value;
var colour = document.getElementById("colouroption").value;
var quantity = document.getElementById("gownquantity").value;

$("#content ul li:last").append("<li> Size: "+size+", Colour: "+colour+", Quantity: "+quantity+"</li>");
});

这是相关的html

<td><input type="number" id="blksize"></td>

<td><select id="colouroption"></select></td>

<td><input type="number" id="gownquantity"></td>
<td><input type="submit" id="add_gowns" value="Add"/></td>
</tr>

</table>
<div id="content">
<ul></ul>
</div>

1 个答案:

答案 0 :(得分:2)

以下内容应按测试方式运行:https://jsfiddle.net/z8q7n9gn/

$('#add_gowns').click(function() {
    var size = $("#blksize").val();
    var colour = $("#colouroption").val();
    var quantity = $("#gownquantity").val();

    $("#content ul").append('<li> Size: ' + size + ', Colour: ' + colour + ', Quantity: ' + quantity + '</li>');
});