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

Question

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

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

谢谢

原文由 Andy Birchall 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jeff Widmer 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

这是假设 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+'"/>');
  });
}

这样做的主要好处是，从理论上讲，它应该让您从表单中发布“可变数量的变量”。您还可以调整脚本以说明某些嵌套对象。只要您将有效的 JSON 传递给您选择的数据属性。

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

原文由 That Realty Programmer Guy 发布，翻译遵循 CC BY-SA 3.0 许可协议