更改从两个选择中的值中获取的form action属性

Question

我在这里发现了一个类似的问题：javascript -基于选择的更改表单操作？

但我的问题有点不同。我有两个选择：

 <form id="CarSearch" action="" method="post">
 <select name="style" id="Style">
 <option value="" selected>Any Style</option>
 <option value="style/sports-1">Sports</option>
 <option value="style/wagon-3">Wagon</option>
 <option value="style/suv-6">SUV</option>
 </select>

 <select name="make" id="Make">
 <option value="" selected>Any Make</option>
 <option value="make/porsche-3">Porsche</option>
 <option value="make/ford-6">Ford</option>
 <option value="make/volvo-7">Volvo</option>
 </select>
<input type="submit" value="submit"/>
</form>

我希望根据两个选择中的值构建form action属性。下面是一些情况：

1. 如果样式和Make都设置为"Any“，因此没有值；表单操作应该是空白的。
2. 如果指定了样式，但Make不是；表单操作应该是，只是样式的值，例如action="style/sports-1"
3. 如果指定了Make，但没有指定样式；表单操作应该是--仅是Make的值，例如action="make/volvo-7"
4. 如果同时指定了样式和Make；表单操作应该是连接样式中的值，并使例如action="/style/sports-1/make/volvo-7"

这两个选择的默认值总是“任意”。我可以尝试在jQuery中为每个select创建两个变量，并在任何一个选择更改时设置它们的值。但让我困惑的是连体部分。

我在这里创建了一个JSFiddle来启动http://jsfiddle.net/L91rb9f9/3/

当没有指定样式时，我将以两个斜线结尾。

Answer 1

试着做这样的事情：

$("#CarSearch").submit(function () {
    var style = $("#Style").val();
    var make = $("#Make").val();

    if (style == "" && make == ""){
        $('form').get(0).setAttribute('action', '');
    }
    else if (style != "" && make != "")  {
        $('form').get(0).setAttribute('action', style + "/" + make);
    }
    else {
        $('form').get(0).setAttribute('action', style + make);
    }
});

Answer 2

<script>
function updateForm(){
    var formelem=$('#CarSearch');
    var styleelem=$('#Style');
    var makeelem=$('#Make');

    var action='/';
    action+=styleelem.val();
    if (action.length>1)action+='/';
    action+=makeelem.val();
    formelem.attr('action',action');
}
</script>
<form id="CarSearch" action="" method="post">
 <select onchange="updateForm();" name="style" id="Style">
 <option value="" selected>Any Style</option>


<option value="style/sports-1">Sports</option>
 <option value="style/wagon-3">Wagon</option>
 <option value="style/suv-6">SUV</option>
 </select>

 <select onchange="updateForm();" name="make" id="Make">
 <option value="" selected>Any Make</option>
 <option value="make/porsche-3">Porsche</option>
 <option value="make/ford-6">Ford</option>
 <option value="make/volvo-7">Volvo</option>
 </select>
<input type="submit" value="submit"/>
</form>

Answer 3

下面的jQuery方法应该满足您的需求。

$("#CarSearch").click(function (){
    var style = $("#Style").val();
    var make = $("#Make").val();
    var formAction = "";

    if(style != "" && make != ""){
        formAction = "/" + style + "/" + make;
    }else if (style != "" && make == "") {
        formAction = style;
    }else if (style == "" && make != ""){
        formAction = make;
    }else {
       formAction = ""; 
    }
    $("#CarSearch").attr("action", formAction);
    alert('Form Action: ' + $("#CarSearch").attr("action"));
});

演示