12

有谁知道是否可以将隐藏的请求参数与<select> <option>HTML 表单中的元素一起传递？

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

谢谢

4

5 回答 5

18

选择列表既有显示给用户的值，也有在表单 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
于 2009-07-23T08:38:51.693 回答
3

type='hidden'您可以使用onchange选择下拉事件更新表单输入，然后将其与表单一起发布。我怀疑您可能希望以与选择下拉列表中的等价物相同的顺序为隐藏输入创建一个可能值的数组，然后使用selectedIndex选择元素的属性通过索引访问数组中的值。

于 2009-07-23T08:26:32.763 回答
3

这是假设 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 数组具有唯一但分组的名称。

于 2014-03-31T16:11:24.863 回答
2

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

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

于 2019-11-27T12:04:45.860 回答
0

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

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

祝你好运！

于 2020-03-16T22:38:41.453 回答