Question

我有一个小的html计算器，你可以输入两个数字，两个单独的按钮可以加或减它们，如下所示：

<form method="post" action="<%= actionURL %>" >
    <input type="text" name="x" value="${x}"/>
    <input type="text" name="y" value="${y}"/>
    <input type="submit" name="add" value="add"/>
    <input type="submit" name="subtract" value="subtract"/>
</form>

我想用select元素替换这两个按钮，当用户选择其中一个选项时，该元素将提交表单。到目前为止，我有以下内容：

<form method="post" action="<%= actionURL %>" >
    <input type="text" name="x" value="${x}"/>
    <input type="text" name="y" value="${y}"/>
    <select name=operation onChange="this.form.submit()">
        <option value="add">Add</option>
        <option value="subtract">Subtract</option>
    </select>
</form>

现在我得到一个带有“Add”和“Subtract”选项的下拉框。每当我选择“Subtract”时，表单都会被提交，我可以在服务器上检查请求的operation参数。但是单击下拉框然后单击“添加”不会触发onChange事件，因为已经选择了“添加”，因此表单未提交。当用户选择已经选择的选项时，有什么方法可以提交表单吗？

Answer 1

这是因为已经选择了“添加”并且没有发生任何变化。您应该在select中添加另一个元素：

<form method="post" action="<%= actionURL %>" >
    <input type="text" name="x" value="${x}"/>
    <input type="text" name="y" value="${y}"/>
    <select name=operation onChange="this.form.submit()">
        <option value="" disabled="disabled" selected="selected">Select operation</option>
        <option value="add">Add</option>
        <option value="subtract">Subtract</option>
    </select>
</form>

Answer 2

您可以使用提交按钮提交表单，您可以在其中设置操作参数，这取决于在下拉列表中选择的值，并且可以执行操作。

通过选择已选择的select元素选项来提交html表单

2 个答案: