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

【问题标题】：How to set action value in form depending on the value of select?如何根据select的值在form中设置action值？
【发布时间】：2013-06-13 04:44:00
【问题描述】：

如何根据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">

【问题讨论】：

为什么不简单地将producctype 的值作为URL 参数传入？
stackoverflow.com/questions/1925614/…的可能重复
你应该考虑重写你的服务器端脚本，而不是 JavaScript，以便它接受 URL /my-url/{{design.id}}?producttype=a，可能重定向到 /my-url/{{design.id}}/a

标签： javascript jquery

【解决方案1】：

这应该可行：

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

需要注意的几点：

如果页面上有多个表单，那么您需要一种更准确的方法来选择正确的表单——也许是id 属性
什么是{{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();

Here is a working example

【讨论】：

【解决方案2】：

试试

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

【讨论】：

【解决方案3】：

你可以试试：

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

【讨论】：