Javascript 表单数据：使用选择选项中的值填充输入标记

我有一个html表单，我需要使输入值等于作为选择选项选择的任何值，因为表单的处理方式，该值必须与输入标记关联-它不能在选择标记内工作。以下是我表格中的选择选项：

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

---

但我很困惑如何让这一切都起作用。谢谢。

您可以执行以下操作：

$( "#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();

            }

如果这不起作用，那么您正在使用的库可能正在更改select的dom。最好通过浏览器检查“选择”图元并查看其工作方式。我建议也使用浏览器开发者选项中的控制台，它将允许您在页面上编写javascript代码，这将帮助您进行测试

获取选定属性的另一种方法是通过

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

试试这个

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

---

只是想知道为什么你不能使用select作为一个普通的表单元素，理解为什么可以帮助我们回答-也许是你的一些代码？表单会转到一个我没有编写的微型购物车脚本，在那里它还会发送一系列其他属性，包括装运重量。出于我不理解的原因，如果在select标记中设置了item_name值，则minicart脚本不会解析权重值，而如果在输入标记中设置，则效果良好。问题是，我无法从下拉列表中选择项目名称。与其尝试修改复杂的微型购物车脚本，我认为解决它可能会更容易。我发现这非常有趣，将名称链接到表单应该只作为HTML表单请求发送，除非这一切都是通过JSIt完成的。这主要超出了我的技能水平，因此我只能推测发生了什么。该表单只是一个html表单，我只能在使用“谢谢”设置值时获取与项目关联的发货重量。你能提供一个更全面的解释如何实现这一点吗？不幸的是，我的总体知识太初级了。这会以字符串形式发送项目名称：$'选择选项：已选择'.val'

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

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