表单数据：使用选择选项中的值填充输入标签答案

【问题标题】：form data: populating input tag with value from select option表单数据：使用选择选项中的值填充输入标签
【发布时间】：2019-11-29 00:48:54
【问题描述】：

我有一个 html 表单，我需要使输入值等于选择作为选择选项的任何值（由于表单的处理方式，该值必须与输入标签相关联 - 它不起作用从一个选择标签内）。以下是我的表单中的选择选项：

<select type="hidden" name="item_colour" id="select">
   <option value="yellow item" selected>yellow</option>
   <option value="blue item">blue</option>
</select>

是否可以按照以下方式创建隐藏输入：

<input type="hidden" name="item_name" value=item_colour>

以上显然不起作用，我想我需要以某种方式使用以下javascript：

document.getElementById("item_colour")

但我不知道如何让这一切正常工作。谢谢。

【问题讨论】：

只是想知道为什么不能将 select 用作普通表单元素，理解为什么可以帮助我们回答 - 也许是您的一些代码？
该表单转到一个迷你车脚本（我没有写），它还发送一堆其他属性，包括运输重量。由于我不明白的原因，如果 item_name 值设置在 select 标记中，则权重值不会被 minicart 脚本解析，而如果我将其设置在输入标记中，它可以正常工作。问题是我无法从下拉列表中选择项目名称。与其尝试修改复杂的 minicart 脚本，我认为解决它可能更容易。
我发现将名称链接到表单非常有趣，应该将其作为 HTML 表单请求发送，除非这一切都是通过 JS 完成的
这主要超出了我的技能水平，所以我只能推测这是怎么回事。该表单只是一个html表单，我只能在使用设置值时获取与项目关联的运输重量>

标签： javascript html forms

【解决方案1】：

试试这个

<input type="hidden" name="item_name" value="$( '#select option:selected' ).val()">

【讨论】：

这实际上将项目名称作为文本字符串发送： $( '#select option:selected' ).val()

【解决方案2】：

你可以这样做：

$( "#select option:selected" ).val();

通过 JS 创建和提交表单的完整示例

function submit() {

                var form = document.createElement("form");
                form.method = "GET";

                 var obj = document.createElement("input");
                 obj.name = "item_colour";
                 obj.value =  $( "#select option:selected" ).val();

                 form.appendChild(obj);

                document.body.appendChild(form);

                form.submit();

            }

如果这不起作用，那么您正在使用的库可能正在更改选择的 dom。最好通过浏览器检查元素选择并查看它是如何工作的。我建议也使用浏览器开发人员选项中的控制台，它可以让您直接在页面上编写 javascript 代码，这将有助于您进行测试。

获取选中属性的另一种方式是通过

 $('.my-custom-select').on('change', function (e, params) {
                alert(e.target.value); // OR
                alert(this.value); // OR
                alert(params.selected);
       });

【讨论】：

谢谢。您能否提供更全面的解释来说明如何实现这一点？不幸的是，我的整体知识太初级了。