Question

我已经制作了这段代码，根据您在第一个选择中选择的内容更改第二个选择。

但是现在我需要在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>

Answer 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;
    });
});

Answer 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.
});

Answer 3

$("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个月的页面。

Answer 4

下面的完整示例，但即使我没有看到代码，我也很确定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>

jQuery：根据Select值更改“action”

4 个答案: