如何使用外部选择值设置表单值答案

【问题标题】：how to set form value with external select value如何使用外部选择值设置表单值
【发布时间】：2012-06-07 07:45:00
【问题描述】：

所以我正在使用播放框架，并尝试创建多个调用一个表单的提交按钮：

所以我有一个字符串列表，我想创建两个按钮，它们将返回服务器并完成一个事件，第一个是发送，第二个是取消。我还想做的是将源值设置为等于在 foo 选择对象中选择的值。我该怎么做呢？我是否需要创建一个javascript，即使它是从表单中触发的，然后在该函数中获取var，然后触发提交？我不是 100% 熟悉 play framework 和 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>

}

【问题讨论】：

标签： javascript scala playframework

【解决方案1】：

首先，html 无效。您应该首先确保没有具有相同 id 的元素。

您必须使用 javascript 来更改表单中的值。我不熟悉标量或播放框架，但如果它们允许您使用 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

【讨论】：

谢谢，效果很好。并且播放框架确实可以访问 jquery。但不幸的是，当我运行它时，您链接的示例 jquery 示例不起作用。第二个例子工作得很好。谢谢

【解决方案2】：

如果其他人有这个问题，我使用以下方法来解决我的问题：感谢 Ruup，因为您的代码是我解决问题的原因

html:

<select id="foo" >
    <option></option>
    <option value="test">test</option>
</select>
<input type="text" value="" name="field" id="field" />

和javascript：

$(document).ready(function() { 
obj = document.getElementById("foo");
obj.onchange = function()
{
     var elements = document.getElementsByName('field');
     for (i=0;i<elements.length;i++)
     {
         elements[i].value = $('#foo').val();
                 }
 }; });

【讨论】：