jQuery：根据选择值更改“动作”答案

【问题标题】：jQuery: Change "action" based on Select valuejQuery：根据选择值更改“动作”
【发布时间】：2010-11-07 09:09:29
【问题描述】：

我编写了这段代码，它会根据您在第一个选择中选择的内容更改第二个选择。

但现在我需要一种 jQuery 方法来根据第一次选择时选择的内容更改“表单操作”。

如果选择了选项 1，我想要 action="renault.php"，如果在第一次选择时选择了选项 2，我想要 action="citroen.php"。

我还希望同时选择两个选项，因此必须在每个选项中选择至少一个选项，如果有人不这样做并点击提交，那么警报应该告诉他们“请至少选择一个品牌和一个型号"

我已经尝试了几个代码，但无法让它工作。

此外，如果用户选择“选择型号”或“选择品牌”，也会出现提醒（要求至少选择一个型号和品牌）

有人可以帮忙吗？

代码：

<form id="frmPreselect" name="frmPreselect" method="post" action="">

    <p>
    <select name="selectOne" id="selectOne" style="font-size:16px; margin-right:20px;     font-family:Verdana, Geneva, sans-serif;">
      <option value="">-- select a Brand --</option>
<option value="1">Renault</option>
<option value="2">Cïtroen</option>
</select>


<select name="selectTwo" id="selectTwo" style="font-size:16px; font-family:Verdana, Geneva, sans-serif;">
<option value="">-- select a model --</option>
</select>
  </p>
  <p>
 <input type="submit" value="SOLICITAR PRESUPUESTOS" style="font-size:20px; font-    family:Verdana, Geneva, sans-serif; font-weight:bold" />
  </p>
</form>
<script type="text/javascript">
$('#selectOne').change(function() {
var options = '';
if($(this).val() == '1') {
options = '<option value="clio">clio</option><option value="symbol">symbol</option>        <option value="sandero">sandero</option>';
}
else if ($(this).val() == '2'){
options = '<option value="Berlingo">Berlingo</option><option value="C3">C3</option>    <option value="C4">C4</option>';
}
$('#selectTwo').html(options);

});
</script>

【问题讨论】：

标签： jquery html

【解决方案1】：

/// <reference path="http://code.jquery.com/jquery-1.4.3.js" />
/// <reference path="http://code.jquery.com/jquery-1.4.1-vsdoc.js" />

$(document).ready(function () {

    var actions = new Array();
    actions[1] = "renault";
    actions[2] = "citroen";


    $("select").change(function () {
        if ($("select#selectOne").val() != "" &&
            $("select#selectTwo").val() != "" ) {
            $("form").attr("action", 
              actions[$("select#selectOne").val()] + ".php");
        }
    });

    $("form").submit(function (event) {

        if ($("select#selectOne").val() == "" || 
            $("select#selectTwo").val() == "") {
            alert("Select a model & brand");
            event.preventDefault();
        }

        return true;
    });
});

【讨论】：

这很简洁，而且完全按照我的需要工作
没问题，很高兴它对你有用！其他一些答案还有其他你可能想要结合的好技术。
如果使用的网络服务器在区分大小写的操作系统上，则应为 actions[1] = "renault"; 和 actions[2] = "citroen";

【解决方案2】：

您也可以等待设置您的操作，直到您提交表单：

$('#frmPreselect').submit(function (e) { 
     var sel1 = $('#selectOne');
     var sel2 = $('#selectTwo');

     if (sel1[0].selectedIndex == 0 || sel2[0].selectedIndex == 0) {
          e.preventDefault(); //don't submit
          alert('You forget something!'); //alert
          return;
     }

     var frm = $(this);

     if (sel1.val() == 1)
        frm.attr('action', 'http://blabla'); //set some action

     //etc. etc.


     //in the end it will submit the form.
});

【讨论】：

【解决方案3】：

下面的完整示例，但即使我没有看到代码，我也很确定 citroen.php 和 renault.php 没有太大区别，因此我建议使用 car.php 处理品牌和型号。

PS：你应该看看一些非侵入式验证插件（例如，参见 demo）

<html>
<head>
    <title>S.O. 4117106</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#selectOne').change(function() {
            var options = '<option value="0">-- select a model --</option>';

            if($(this).val() == '1') {
                options += '<option value="clio">clio</option>';
                options += '<option value="symbol">symbol</option>';
                options += '<option value="sandero">sandero</option>';
            } else if ($(this).val() == '2'){
                options += '<option value="Berlingo">Berlingo</option>';
                options += '<option value="C3">C3</option>';
                options += '<option value="C4">C4</option>';
            } 

            $('#selectTwo').html(options);
        });

        $('#frmPreselect').submit(function() {
            if ($('#selectOne').val() == '0' || $('#selectTwo').val() == '0') {
                alert('please select at least one brand and one model');
                return false; // don't submit
            }

            var action = '';

            if($('#selectOne').val() == '1') {
                action = 'renault.php';
            } else if ($('#selectOne').val() == '2'){
                action = 'citroen.php';
            }

            $(this).attr('action', action);
            return true; // submit
        });

        $('#selectOne').change();
    });
    </script>
    <style type="text/css">
        select, .bigSubmit {
            font-size: 16px; 
            font-family: Verdana, Geneva, sans-serif;
        }

        #selectOne {
            margin-right: 20px; 
        }

        .bigSubmit {
            font-size: 20px; 
            font-weight:bold;
        }

    </style>
</head>
<body>
    <form id="frmPreselect" name="frmPreselect" method="post" action="">
        <p>
            <select name="selectOne" id="selectOne">
                <option value="0">-- select a Brand --</option>
                <option value="1">Renault</option>
                <option value="2">Cïtroen</option>
            </select>

            <select name="selectTwo" id="selectTwo">
            </select>
        </p>
        <p>
            <input type="submit" value="SOLICITAR PRESUPUESTOS" class="bigSubmit" />
        </p>
    </form>
</body>
</html>

【讨论】：

我对您使用 car.php 的建议感到好奇，我很想这样集中，但问题是我在 renault.php citroen.php 等上有不同的表格，所以我必须造车.php 动态？我猜根据所选品牌的正确形式？
@sebastian，是的，但你可以include 特定部分（在你的情况下是表格）。我的观点是你应该避免重复代码

【解决方案4】：

$("selectOne").change(function(){
    switch($(this).val())
    {
       case "1" : $("form[name='frmPreselect']").attr("action","http://foo"); break;
       case "2" : $("form[name='frmPreselect']").attr("action","http://bar"); break;
       default : $("form[name='frmPreselect']").attr("action","http://foo");
     }
});

您可以使用form[name='frmPreselect'] 来选择表单，当然也可以使用#frmPreselect，但我不会只使用$("form")，因为如果您在 2 个月后向页面添加第二个表单，这会导致您出现问题路。

【讨论】：

开关中的值不会是“1”、“2”吗？
哎呀，他们会的 - 抱歉没有检查他在选项值中实际输入的内容