javascript - 如何使用外部选择值设置表单值

Question

所以我正在使用 Play Framework ，我尝试创建多个调用一个表单的提交按钮:

所以我有一个字符串列表，我想创建两个按钮，它们将返回到服务器并完成一个事件，第一个是发送，第二个是取消。我还想做的是将源值设置为等于在 foo 选择对象中选择的值。我该怎么做呢？我是否需要创建一个 javascript，即使它是从表单中触发的，然后在该函数中获取 var，然后触发提交？我不是 100% 熟悉 play 框架和 scala，所以我不确定我是否可以在不使用新方法的情况下以某种方式在这段代码中获取它。

@(myList: List[String], theForm: Form[Obj])
@import helper._
@main("myVar Controller") {

<select id="foo">
</select>

<table border="1">
    <tr>
    @for(myVar <- myList) {
        <td>@myVar
        @form(routes.Application.method()) {
        <div id="hiddenForm" style="visibility:hidden">
            <input type="text" name="commandID" id="commandID" value="10" />    //Send Code
            <input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
            <input type="text" name="destination" id="destination" value="@myVar" />
        </div>
        <input type="submit" value="Send" />
        }
        @form(routes.Application.method()) {
        <div id="hiddenForm" style="visibility:hidden">
            <input type="text" name="commandID" id="commandID" value="18" />    //Undo code
            <input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
            <input type="text" name="destination" id="destination" value="@myVar" />
        </div>
        <input type="submit" value="Undo" />
        }
        </td>
    }
    </tr>
</table>

Answer 1

首先，html 无效。您应该首先确保不存在具有相同 ID 的元素。

您必须使用 javascript 来更改表单中的值。我不熟悉 scalar 或 playframework，但如果它们允许您使用 jQuery，我推荐以下解决方案。

$("#foo").bind("change", function(){$("#source").val($("#foo").val()));});​

示例: http://jsfiddle.net/RubenJonker/a8a8p/5

如果他们不允许您使用 jQuery，那么您应该在 select 的 onchange 事件中放置一些 javascript。

<select onchange="document.getElementById('source').value = this.value">
</select>

示例: http://jsfiddle.net/RubenJonker/a8a8p/4