Question

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

<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”。但是，我想实际发送选择的值AND键，在这种情况下都是“1”和“选项A”。

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

非常感谢任何帮助！

Answer 1

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

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

Answer 2

您可以使用数据的jSON表示：

<select name="type1">
 <option value="{'1':'Option A'}">Option A</option>
 <option value="{'2':'Option B'}">Option B</option>
</select>

Answer 3

在HTML中，这是不可能的：select元素提供的数据已定义为所选value的{{1}}属性，如果存在（否则为所选option元素的内容）。

在JavaScript中，一旦您决定如何内容（您的描述中的“键”）应该通过，那将非常简单。最简单的方法是，您可以将内容附加到option属性，并在字符串之间添加一些分隔符;然后你必须解析服务器端，但这也很简单。

然而，value元素的一部分是内容是用户界面中的可见字符串，用户可以理解，option属性是机器可读的可处理的数据。在良好的设计中，它们是分开保存的，不是合并的;服务器应该只需要value属性中的数据;否则有一个应该修复的设计缺陷。

Answer 4

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

<option value="1_A">Option A</option>

Answer 5

您可以添加此代码，以便在<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, which tells you the key that's selected

Answer 6

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

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);
}

所以select的值将在type1Value变量中发送，EASY !!

将选项框的值和键作为参数发送？

6 个答案: