jQuery：根据选择值更改“操作”_Jquery_Html

jQuery：根据选择值更改“操作”

jquery html

jQuery：根据选择值更改“操作”,jquery,html,Jquery,Html,我编写了这段代码，它根据您在第一次选择中选择的内容更改第二次选择但是现在我需要jQuery中的一种方法来根据第一次选择时选择的内容更改表单操作如果选择了选项1，我想要action=renault.php；如果在第一次选择时选择了选项2，我想要action=citroen.php 我还想被要求同时选择两个选项，因此必须在每个选项上选择至少一个选项，如果有人没有这样做并点击提交，则会发出警报，告诉他们请选择至少一个品牌和一个型号我试过好几种密码，但都没用此外，如果该人员选择了一个型号或品牌，

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

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

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

我还想被要求同时选择两个选项，因此必须在每个选项上选择至少一个选项，如果有人没有这样做并点击提交，则会发出警报，告诉他们请选择至少一个品牌和一个型号

我试过好几种密码，但都没用

此外，如果该人员选择了一个型号或品牌，则还应显示警报，要求选择至少一个型号和品牌

有人能帮忙吗

代码：

您可以使用表单[name='frmPreselect']来选择表单，当然也可以使用frmPreselect，但我不会只使用$form，因为如果您在接下来的两个月向页面添加第二个表单，这会给您带来问题。

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

$('#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.
});

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

PS：你应该看看一些非侵入性的验证插件，看看这个例子

<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>

开关中的值不是真的是1，2吗？哎呀，是的，他们会-很抱歉，没有检查他在选项值中实际输入的内容。这很清楚，切中要害，完全符合我的需要。没问题，很高兴它为您工作！其他一些答案还有其他一些好的技巧，你可能也希望将其纳入其中。应该是actions[1]=雷诺；行动[2]=雪铁龙；如果使用过的Web服务器是在区分大小写的OSI上，我对您关于使用car.php的建议感到好奇，我很想这样集中，但问题是我在renault.php citroen.php等上有不同的表单，所以我必须动态构建car.php？根据所选品牌选择合适的形式，我想？@sebastian，类似的东西是的，但你可以在你的案例中包括具体的零件形式。我的观点是你应该避免重复的代码

$("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");
     }
});

$('#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.
});

<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>