3

我想在提交表单时同时发送选项框的值和键。我觉得这应该很简单，但我不确定该怎么做。下面是我的表单中的一个片段，用于演示我所引用的内容：

<form name='form' onSubmit="return checkForm();" action="../servlet/AccountRequest">

<select name="type1">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

<br/><input type="button" id="Submit" onclick="checkForm(this.form)" value="Request" />
<input type="reset" value="Cancel"/>
</form>

​ 在正常情况下，如果我在下拉框中选择“选项 A”，我希望发送值，即“1”。但是，我想实际发送选择的值和键，在这种情况下是“1”和“选项 A”。

在我的例子中，我调用了一个 checkForm() JavaScript 函数来验证表单输入（还有其他字段，如名字、姓氏、电子邮件地址和密码），然后将参数转发到 Java 类 (AccountRequest)。我确定有一种方法可以在单击“请求”按钮时将密钥存储为变量，我只是不知道如何。

任何帮助将非常感激！

4

6 回答 6

5

您可以使用数据的 JSON 表示形式：

<select name="type1">
 <option value="{'1':'Option A'}">Option A</option>
 <option value="{'2':'Option B'}">Option B</option>
</select>
于 2012-08-15T20:10:48.977 回答
4

这可能不是您期望的方法，但您可以将键/值对作为您的值发送，并在服务器端收到它时对其进行解析。

<select name="type1">
   <option value="1,Option A">Option A</option>
   <option value="2,Option B">Option B</option>
</select>
于 2012-08-15T20:04:22.067 回答
3

在 HTML 中，这是不可能的：select元素贡献的数据被定义为valueselected 的属性option，当存在时（否则为 selectedoption元素的内容）。

在 JavaScript 中，一旦您决定了应该如何传递内容（描述中的“键”），这将非常容易。最简单的情况是，您可以将内容附加到value属性中，并在字符串之间使用一些分隔符；那么您将不得不解析该服务器端，但这也很简单。

但是，option内容是用户界面中可见的字符串，用户可以理解，而value属性是机器可读且易于处理的数据，这正是元素理念的一部分。在好的设计中，它们是分开的，而不是组合的；服务器应该只需要value属性中的数据；否则存在应该修复的设计缺陷。

于 2012-08-15T20:07:58.870 回答
3

您可以添加此代码以在函数中获取所选<option>标签的文本：checkform

var select = document.getElementsByName("type1")[0]; // get select element - simpler if it has an ID because you can use the getElementById method
var options = select.getElementsByTagName("option"); // get all option tags within the select

for (i = 0; i < options.length; i++) { // iterate through all option tags
    if (options[i].value == select.value){ // if this option is selected
        var key = options[i].innerHTML; // store key of selected option here
    }
}

DEMO，告诉你选择的键

于 2012-08-15T20:33:30.847 回答
2

使用复合值，然后在服务器上解析出来：

<option value="1_A">Option A</option>
于 2012-08-15T20:04:16.020 回答
1

您可以使用隐藏的输入类型发送值

1.-选择默认值：

<input type="hidden" id="theValue" name="type1Value" value="Option A"/>

2.-将 onChange 函数添加到您的选择中，这会更改以前的隐藏值

<select id="type1" name="type1" onChange="updateValue()">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

假设您使用的是 jQuery：

function updateValue(){
   var value= $('#type1').find(":selected").text();
   $('#theValue').val(value);
}

所以选择的值将在 type1Value 变量中发送，EASY！

于 2013-05-07T21:41:36.707 回答