jQuery - 来自选择输入的隐藏输入值答案

【问题标题】：jQuery - hidden input value from select inputsjQuery - 来自选择输入的隐藏输入值
【发布时间】：2010-07-07 13:17:40
【问题描述】：

我有这样的事情：

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<select class="bla">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

<input class="alloptions" type="hidden" value="">

我希望每次在上面的每个选择输入字段中选择不同的选项时都会更改隐藏输入字段的值。此值将包含从所有输入字段中选择的选项，用逗号分隔。

我该怎么做？

【问题讨论】：

如果您使用标识符而不是类，您会发现它更容易（并且启动更快）。
我希望每次在上面的每个选择输入字段中选择不同的选项时，隐藏输入字段的值都会更改。我认为您不会这样做。你想解决什么问题？
好吧，我需要一个 wordpress 小部件中的某个选项。问题是这个选项需要是一个数组，所以我需要一个输入字段，通过取所有用逗号分隔的选择值来模拟数组。然后在后端我使用explode从这个字符串创建一个数组。
@Alex：所以表单实际上是发送到后端并在那里处理的？为什么不直接提取选择字段的值？喜欢$config = array($_POST['optionA'], $_POST['optionB'], $_POST['optionC'])？
@Alex：我不确定 WP 是否允许数组。但是你可以测试一下。你是对的，如果选择元素具有相同的名称，那么只有最后一个会成功。要使 PHP 将它们视为数组，您必须将 [] 附加到名称后，即 <select name="option[]"></select><select name="option[]"></select>... 另请参阅：php.net/manual/en/language.variables.external.php 示例 3

标签： javascript jquery html forms

【解决方案1】：

类似：

$('select.bla').change(function() {
    $value = $('select.bla').map(function(){return $(this).val()}).get().join(',');
    $('input.alloptions').val($value);
});

解释：

change() gets fired whenever the value of a select field changes
使用map()，我们创建了一个包含select 字段值和join 值的数组，它们以逗号分隔

【讨论】：

谢谢，对我帮助很大！！

【解决方案2】：

change 事件是你所追求的。

【讨论】：

【解决方案3】：

.serialize() 方法可以作用于已选择单个表单元素的 jQuery 对象，例如“input”、“textarea”和“select”——这意味着您可以执行以下操作：

$('.bla').change(function(){
   var opts = $('select').serialize();
   $('.alloptions').val(opts);
});

每个“选择”都需要一个名称值并会产生：

select1=1&select2=2&select3=1

【讨论】：

【解决方案4】：

您真的需要为此使用 Javascript 吗？如果您为所有三个选择框提供相同的“名称”属性，则值将作为逗号分隔列表发送到服务器。

请确保在进行拆分时对每个元素进行修剪，因为某些浏览器会在逗号后放置空格。

【讨论】：