有谁知道是否可以在 HTML 表单中使用 <select> <option> 元素传递隐藏的请求参数？
例如，如果用户从<select> 选项列表中选择了<option value="foo">foo</option>，我是否可以通过某种方式传入隐藏值以及“foo”值，并将其作为请求参数检索？例如。当用户选择 foo 选项时，<input type="hidden" name="x" value="bar"/> 将使我能够从请求中获取值“foo”和“bar”。
谢谢
【问题讨论】：
标签： html hidden html-select
选择列表既有显示给用户的值，也有在表单 post 中传回服务器的值。因此，您可以在发布的值中使用某种分隔符来将两个值都发回，然后在此时解析它们：
<select id="myselectlist" >
<option value="foo|bar">foo</option>
<option value="foo2|bar2">foo2</option>
</select>
但更好的是传回一个 ID 值，然后您可以使用它来了解从数据库中选择了哪个项目，并使用它来查找第二个相关项目：
<select id="myselectlist" >
<option value="123">foo</option>
<option value="124">foo2</option>
</select>
您的数据库可能如下所示：
ID DisplayValue OtherData
123 foo bar
124 foo2 bar2
【讨论】：
有表单输入type='hidden'，您可以使用下拉选择的onchange 事件更新它，然后它将与表单一起发布。我怀疑您可能希望以与选择下拉列表中的等价物相同的顺序为隐藏输入创建一个可能值的数组，然后使用选择元素的selectedIndex 属性通过索引访问数组中的值。
【讨论】：
假设 jQuery 可用，这是一个替代解决方案。如果您使用 jQuery 以外的 js 实用程序库，或者根本没有库，这仍然是可能的。它只是将一个函数绑定到选择的 onchange 事件并从自定义数据属性解析 json。
<form>
<select name="AnySelect">
<option value="primary-value0" data-support='["test",128,2014,"blackberry"]' />
<option value="primary-value1" data-support='["test1",39,2013,"apricot"]' />
<option value="primary-value2" data-support='["test2",42,2012,"peach"]' />
<option value="primary-value3" data-support='[null,null]' />
<option value="primary-value4" data-support='[30,28,null]' />
</select>
.
.
.
<span style="visibility: hidden" id="Support_AnySelect-container"><span>
</form>
^ 标记 ------- JavaScript v
//bind onchange once document is loaded and ready
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); });
function UpdateHidden(event)
{
//Create a base name for grouping dynamic values; ex: Support_AnySelect
Name='Support_'+SelectField.attr('name');
//Check if container was made for us already
Contain=$(this.parent).find('#'+Name+'-container');
if(Container.length===0) //make the container if missing
{
$(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>');
Contain=$(this.parent).children('#'+Name+'-container');
}
//get our special multi-values, jQuery will auto decode the JSON
SupportValues = this.data('support');
Contain.empty(); //get rid of last select options
$.each(SupportValues,function(i,val)
{
Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>');
});
}
这样做的主要好处是，理论上，它应该让您从表单中发布“可变数量的变量”。您还可以调整脚本以考虑某些嵌套对象。只要您将有效的 JSON 传递给您选择的数据属性。
如果有人在我之前尝试过这个，请告诉我。我稍后会对此进行测试，但可能会出现一些小错误。您应该能够在任何选择元素上使用它，并且隐藏输入会自动填充到另一个元素中；脚本还应该保证这些对你来说是相同的表单标签，并且通过 HTTP 数组具有唯一但分组的名称。
【讨论】：
'#TheSelector'），这些快捷方式对于新手来说并不明显。而且由于它不起作用，我什至无法尝试自己解决问题。无论如何，这些都是次要的事情，由于您指出我正确方向的指示，我仍然可以使我的代码正常工作。点赞！
如果您需要为选择下拉菜单的每个选项使用隐藏字段，您可以在标签中自己的属性中设置该值，而不是将其设置为隐藏字段。
<option value="foo" fooData="foo|bar">foo</option>
<option value="foo2" fooData="foo2|bar2">foo2</option>
【讨论】：
我想补充一点，如果您愿意使用单选按钮而不是下拉选择，以下对我有用：
<label>Email:</label>
{% for email in emails %}
<input type="radio" id="{{ email.email_address }}" name="emaildata" value="{{ email.email_address }}">
<label for="{{ email.email_address }}">{{ email.email_address }} </label>
{% empty %}
{% endfor %}
然后在您的视图中，您仍然检索与上述相同的数据：
email = request.POST.get("emaildata","")
祝你好运！
【讨论】：