个人中心
gpt4 book ai didi

Javascript 决策语句无法正常工作

转载 作者：行者123 更新时间：2023-11-29 22:59:04 24 4
gpt4 key购买 nike

我目前正在开发一个应该接受用户输入的网络表单。婚姻表格询问用户他们目前是否已婚，如果他们回答"is"，那么假设会在下面出现另一个下拉类型的问题，询问“你结婚多少次？”等等等等。我创建了决策声明，但是当我测试婚姻形式并输入"is"时，没有弹出任何其他信息。

预期的结果是，当用户回答"is"时，另一个问题应该出现在下方。

婚姻.php

    <!doctype html>
<html lang="en">
      <style>
    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial;
    }

    .active {
        background-color: #4CAF50;
        color: white;
    }
    /* Links inside the navbar */

    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
</style>
<head>

</head>
<body style="text-align:center;">
    <div style="margin:0 auto; text-align:center;">
        <img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
    </div>
    <h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
    <br>
    <div class="navbar">
        <a>Education History</a>
        <a class="active" href="Marital.php">Marital History</a>
        <a>Employment History</a>
        <a>Military History</a>
        <a>Substances History</a>
        <a>Social/Personal History</a>
        <a>Physical Health History</a>
        <a>Mental Health History</a>
    </div>
    <form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">

        <br></br>
        <table style="margin:0 auto;">
            <tr>
                <td class="Question">
                    Are you currently married?
                </td>
                <td style="width:100px;">
                    <select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="evermarried_row">
                <td>
                    Have you ever been married?
                </td>
                <td>
                    <select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="howmanymarriages_row">
                <td>
                    How many times have you been married?
                </td>
                <td>
                    <select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                        <option value='4'>4</option>
                        <option value='5 or more'>5 or more</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="divorced_row">
                <td>
                    Have you ever been divorced?
                </td>
                <td>
                    <select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="widowed_row">
                <td>
                    Are you widowed?
                </td>
                <td>
                    <select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="children_row" required>
                <td>
                    Do you have any children?
                </td>
                <td>
                    <select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="howmanychildren_row">
                <td>
                    How many children do you have?
                </td>
                <td>
                    <select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                        <option value='4'>4</option>
                        <option value='5'>5</option>
                        <option value='6'>6</option>
                        <option value='7 or more'>7 or more</option>
                    </select>
                </td>
            </tr>

        </table>
        <table style="margin:0 auto;">
            <tr>
                <td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
                <td><input type="button" value="Back!" onclick="history.back()"></td>
                <td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
            </tr>
        </table>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="Marital.js">
        function Marital_Validation() {
            $('#marital_save').css('border-color', '#163c6a');
            $('#marital_save').css('background', 'none');
            $('#marital_save').css('background-color', 'green');
            $('#marital_save').css('color', 'white');
            $('#marital_save').text('Saved');
            $('#marital_indicator').css('background-color', 'green');
        }
    </script>
</body>
</html>

婚姻.js

/*
 Marital variables:

married
evermarried
howmanymarriages
divorced  
widowed  
children
howmanychildren

*/

$(function(){

    $("#married").change(function(){
        var option=$("#married").val();
        if (option==='No'){
            $("#evermarried_row").show();
        }
        if (option==='Yes'){
            $("#howmanymarriages_row").show();
        }
    });

    $("#evermarried").change(function(){
        var option=$("#evermarried").val();
        if (option==='No'){
            $("#children_row").show();
            $("#howmanymarriages_row").hide();
        }
        if (option==='Yes'){
            $("#howmanymarriages_row").show();
        }
    });

    $("#howmanymarriages").change(function(){
        var option=$("#howmanymarriages").val();
        var married=$("#married").val();
        if (option==='1'){
            if (married==='Yes'){
                $("#children_row").show();
                $('#divorced_row').hide();
                $("#widowed_row").hide();
            }
            if (married==='No'){
                $('#divorced_row').show();
            }
        }
        if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
            $('#divorced_row').show();

        }
    });

    $("#divorced").change(function(){
        var option=$("#divorced").val();
        var married=$("#married").val();
        var timesmarried=$("#howmanymarriages").val();
        if (option==='No'){
            $("#widowed_row").show();

        }
        if (option==='Yes'){
            if (timesmarried==='1'){
                $("#widowed_row").hide();
                $("#children_row").show();
            }
            if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
                $("#widowed_row").show();

            }
        }
    });

    $("#widowed").change(function(){
        $("#children_row").show();
    });

    $("#children").change(function(){
        var option=$("#children").val();
        if (option==='No'){
            $("#howmanychildren_row").hide();
        }
        if (option==='Yes'){
            $("#howmanychildren_row").show();
        }
    });

    $(".needs_saved_marital").change(function(){
        var married=$("#married").val();
        var evermarried=$("#evermarried").val();
        var howmanymarriages=$("#howmanymarriages").val();
        var divorced=$("#divorced").val();
        var widowed=$("#widowed").val();  
        var children=$("#children").val();
        var howmanychildren=$("#howmanychildren").val();

        if (married==='Yes'){
            $("#evermarried").attr('required',false);
            $("#divorced").attr('required',false);
            $("#widowed").attr('required',false);
            $("#howmanymarriages").attr('required',true);
        }
        if (married==='No'){
            $("#divorced").attr('required',false);
            $("#widowed").attr('required',false);
            $("#evermarried").attr('required',true);
        }

        if (evermarried==='Yes'){
            $("#howmanymarriages").attr('required',true);
            $("#divorced").attr('required',true);
            $("#widowed").attr('required',true);
        }
        if (evermarried==='No'){
            $("#divorced").attr('required',false);
            $("#widowed").attr('required',false);
            $("#children").attr('required',true);
        }

        if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
            $("#divorced").attr('required',true);
            $("#widowed").attr('required',true);
        }

        if (children==='Yes'){
            $("#howmanychildren").attr('required',true);
        }
        if (children==='No'){
            $("#howmanychildren").attr('required',false);
        }
    });

});

最佳答案

它按预期工作。检查这个 fiddle :https://jsfiddle.net/ax6kfjvz/

我猜你在脚本之后包含了 jQuery。或者您根本不包括 jQuery。试试这个模板:

<!doctype html>
<html lang="en">

<head>
  <title>Couples Issues</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="js/your-awesome-script.js"></script>
</body>

</html>

使用库时，必须在脚本之前包含它们，否则浏览器不知道这个函数 $() 来自哪里。

Here is a good article.

关于Javascript 决策语句无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55997730/

24 4 0
文章推荐： java - 无法让android权限请求对话框出现
文章推荐： php - 比 join 更好的解决方案
文章推荐： php - 具有不同内容的 WordPress 子域
文章推荐： javascript - 根据特定键将对象数组转换为深层嵌套对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com