Question

如何根据select的值设置表单中的操作值？

<form action="/my-url/{{design.id}}" method="get">
    <select name="producttype">
       <option value="lite">Select one of option</option>
       <option value="a">Option a</option>
       <option value="b">Option b</option>
       <option value="c">Option c</option>
    </select>
</form>

如何创建这样的东西：

如果select选项的值为a，则表单操作将为：<form action="/my-url/{{design.id}}/a" method="get">

如果select选项的值为b，则表单操作将为：<form action="/my-url/{{design.id}}/b" method="get">

Answer 1

这应该有效：

$("select[name='producttype']").change(function(){
    var form = $("form");
    var action = "/my-url/{{design.id}}/" + $(this).val();
    form.attr("action", action);
});

需要注意的事项：

如果页面上有多个表单，那么您需要更准确的方法来选择正确的表单 - 可能是id属性
什么是{{design.id}}？这是否意味着动态生成？

Note 2的解决方案可能是将基本URL包含为data-*属性，如下所示：

<form action="/my-url/{{design.id}}" data-baseurl="/my-url/{{design.id}}/" method="get">

然后将上面的javascript更改为：

var action = form.data("baseurl") + $(this).val();

Here is a working example

Answer 2

尝试

$('select[name="producttype"]').change(function(){
    var $this = $(this);
    $this.closest('form').attr('action', '/my-url/' + $this.val())
})

Answer 3

您可以尝试：

var producttype = document.getElementsByName("producttype")[0];
producttype.onchange = function() {
    var form = document.getElementsByTagName("form")[0];
    form.action = "/my-url/{{design.id}}/" + this.value;
}

如何根据select的值设置表单中的动作值？

3 个答案: