javascript - 根据表单选择下拉选项重定向到 URL

Question

我创建了一个具有两个下拉框或选择选项的表单。当在第一个下拉菜单中选择选项 1 并在第二个下拉菜单中选择任何选项时，用户单击“提交”按钮并发送到“谢谢”页面 1。

但是，如果用户从第一个下拉列表中选择选项 2，则第二个下拉列表应该消失，并且单击“提交”后，用户将转到“谢谢”页面 2。

我已经创建了用于隐藏下拉菜单的表单和js，效果很好。我需要帮助才能使提交按钮按所述工作。

http://jsfiddle.net/D9x42/3/

HTML

<form action="http://www.google.com" target="_blank">
<select id="selection">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<br/>
<div id="show">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<div><input type="submit" value="SUBMIT"></input></div>

Javascript

$(document).ready(function() {

//Show the field
$("#show").show();

//Hide the field only when option 2 is selected in second drop down
$('#selection').change(function() {
    if ($("#selection").val() == "2") {
        $("#show").hide();

    }

    else {

        $("#show").show();

    }
});
});

在我的 js fiddle 示例中，提交时表单默认为 google.com，这可以是感谢第 1 页的参数。

Answer 1

将此代码添加到您的 JavaScript 中。当用户单击提交按钮时，此代码将检查第一个下拉列表的值并相应地修改表单操作。

$("#id-submit").click(function() {
     if ($("#selection").val() == 2)
     {
         $("#id-form1").attr("action","http://bing.com");            
     }
    document.getElementById('id-form1').submit(); 
}

为了实现此目的，我为表单命名，向提交按钮添加了一个 ID，并将其更改为键入按钮。

HTML

<form id="id-form1" name="form1" action="http://www.google.com" target="_blank">
    <select id="selection">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <br/>
    <div id="show">
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
    <div><input id="id-submit" type="button" value="SUBMIT"></input></div>
</form>

已更新Fiddle