Question

是否有人知道是否可以使用HTML表单中的<select> <option>元素传递隐藏的请求参数？

因此，例如，如果用户从<option value="foo">foo</option>选项列表中选择<select>，我是否可以以某种方式传递隐藏值以及“foo”值，并将其检索为请求参数？例如。当用户选择foo选项时，<input type="hidden" name="x" value="bar"/>将使我能够从请求中获取值“foo”和“bar”。

由于

Answer 1

选择列表既包含向用户显示的值，也包含在表单发布中传递回服务器的值。所以你可以在发布的值中使用某种分隔符来获取两个值，然后在那时解析它们：

        <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

Answer 2

表单输入type='hidden'可以使用select下拉列表中的onchange事件进行更新，然后将使用表单发布。我怀疑你想要创建一个隐藏输入的可能值数组，其顺序与select下拉列表中的等效顺序相同，然后使用select的selectedIndex属性通过索引访问数组中的值元件。

Answer 3

这是一个假设jQuery可用的替代解决方案。如果你使用jQuery之外的js实用程序库，或者根本没有库，那么这仍然是可能的。它只是将一个函数绑定到select的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+'"/>');
  });
}

这样做的主要好处是，从理论上讲，它应该允许您发布可变数量的变量＆＃39;从形式。您还可以调整脚本以考虑某些嵌套对象。只要将有效的JSON传递给您选择的数据属性即可。

如果有人在我做之前尝试过这个，请告诉我。我稍后会测试它，但可能会有一些小错误。你应该能够在任何select元素上使用它，并且隐藏的输入会自动填充到另一个元素中;脚本还应保证这些标签与您具有相同的表单标记，并通过HTTP数组具有唯一但已分组的名称。

Answer 4

如果需要为选择下拉列表的每个选项使用隐藏字段，则可以在标记中自己的属性中设置该值，而不必将其设置为隐藏字段。

<option value="foo" fooData="foo|bar">foo</option>
<option value="foo2" fooData="foo2|bar2">foo2</option>

Answer 5

我想补充一点，如果您愿意使用单选按钮而不是下拉菜单，那么以下内容对我有用：

<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","")

祝你好运！

在HTML选择选项中传递隐藏的输入字段

5 个答案: