在 HTML 中选择具有多个值和名称的表单答案

【问题标题】：select form with multiple values and names in HTML在 HTML 中选择具有多个值和名称的表单
【发布时间】：2014-08-13 15:21:26
【问题描述】：

是否有可能，选择表单中的一个选项返回 2 个具有 2 个名称的值？我有 f.e.:

<form name="form1" action="Servlet1" method="get">
    <select class="class1" name="name1" onChange="javascript:document.form1.submit();">
        <option value="value1">Test1</option>
        <option value="value2">Test2</option>
    </select>
</form>

如果有人点击 Test1，我希望表单返回 name1=value1&name2=value2，而不仅仅是一个值。

谢谢！

【问题讨论】：

如果用户只点击一个值，为什么你想要所有的值？还是您的意思是要允许选择多个值？然后使用multiple 属性。
没有多选。当用户单击一个选项时，我只想要多个值。我的例子不是最好的，每个选项都必须有自己的 2 个值。

标签： html forms select

【解决方案1】：

您可以采取多种方法来解决这个问题。

最简单的就是通过在服务器上查找来处理它。

my %values = (
    value1 => { foo => 1, bar => 2 },
    value2 => { foo => 3, bar => 4 },
)

my $select_value = $q->param('name1');
my $foo = $values{$select_value}->{foo};
my $bar = $values{$select_value}->{bar};

或者，使用结构化数据格式（例如 JSON）并将其编码到值中：

<option value="{&quot;bar&quot;:2,&quot;foo&quot;:1}">Test1</option>

然后在服务器上解码：

my $select_value = $q->param('name1');
my $decoded_value = from_json($select_value);
my $foo = $decoded_value->{foo};
my $bar = $decoded_value->{bar};

您还可以在提交表单时应用一堆客户端 JavaScript 来生成带有 DOM 的隐藏输入，但我不推荐这种方法。

【讨论】：

【解决方案2】：

这可能不是最好的方法，但您始终可以将两个值放在一个值属性中。例如，您可以尝试：

<select>
  <option value="name1.name2">Test1
  <option value="...">Test2
</select>

然后，您将解析出 javascript 中的不同值。

还有一个有趣的事实：您不需要 HTML 5 中的标签。浏览器会为您关闭元素！

【讨论】：