javascript - 如何根据select的值在form中设置action值？

Question

如何根据select的值在form中设置action值？

<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>

如何创建这样的东西：

如果选择选项有价值，a我的表单操作将是：<form action="/my-url/{{design.id}}/a" method="get">

如果选择选项有价值，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);
});

需要注意的几点：

1. 如果页面上有多个表单，那么您需要一种更准确的方式来选择正确的表单——也许是一个id属性

2. 是什么{{design.id}}？这是否意味着动态生成？

---

注 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();

这是一个工作示例

Answer 2

Try

$('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;
}