Question

好的我正试图这样做，以便持续时间列表框隐藏，并在选择不同的加息时显示某些选项。我在运行函数时遇到问题，它说函数没有定义，我在查看错误的位置时遇到了问题

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
Author: Paul 
Calculate Hike Cost Webpage
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        
         <script language="JavaScript" src="jquery-2.1.4.js">
            function showHide(val)
            {
                if (val = 1) {
                    $("#HikeDuration[value=2]").show();
                    $("#HikeDuration[value=3]").show();
                    $("#HikeDuration[value=4]").show();
                    $("#HikeDuration[value=5]").hide();
                    $("#HikeDuration[value=7]").hide();
                }
                else if (val = 2) {
                    $("#HikeDuration[value=2]").hide();
                    $("#HikeDuration[value=3]").hide();
                    $("#HikeDuration[value=4]").hide();
                    $("#HikeDuration[value=5]").show();
                    $("#HikeDuration[value=7]").show();
                } 
                else if (val = 0){
                    $("#HikeDuration[value=2]").hide();
                    $("#HikeDuration[value=3]").show();
                    $("#HikeDuration[value=4]").hide();
                    $("#HikeDuration[value=5]").show();
                    $("#HikeDuration[value=7]").hide();
                }
            }
                </script>
    </head>
    <body>
        <center>
            <h1>
                Calculate the Cost of Your Hike
            </h1>
        </center>
        <br />
        <form action="MyFormServlet" method=GET>
            <center>  
                Choose a Hike 
                <select name="Hikes" id="Hikes" onChange="showHide(this.value)">
                    <option value="" disabled selected>Select your Hike</option>
                    <option value="0">Gardiner Lake</option>
                    <option value="1">Hellroaring Plateau</option>
                    <option value="2">The Beaten Path</option>
                </select>
                <br />
                <label>Hike Start Date:</label>
                <input type="TEXT" name="month" value="MM" style="width: 30px" maxlength="2">
                <input type="TEXT" name="day" value="DD" style="width: 30px" maxlength="2">
                <input type="TEXT" name="year" value="YYYY" style="width: 40px" maxlength="4">
                <br />
               
                Hike Duration:
                <select name="HikeDuration" id="HikeDuration">
                    <option value="" disabled selected>Select your option</option>
                    <option value="2" style="display:none;">2 Days</option>
                    <option value="3" style="display:none;">3 Days</option>
                    <option value="4" style="display:none;">4 Days</option>
                    <option value="5" style="display:none;">5 Days</option>
                    <option value="7" style="display:none;">7 Days</option>
                </select> 
                
                <br />
                Number of Hikers:
                <select name="NumberOfHikers" id="NumberOfHikers">
                    <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">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
                <br />
                <br />
                <div style='border:1px black solid;'>
                    Hiking Season is from 6/1 to 10/1
                    <br />
                    The Gardiner Lake tour: 3 or 5 day duration 
                    <br />
                    The Hellroaring Plateau: 2, 3, or 4 days duration 
                    <br />
                    The Beaten Path trip: 5 or 7 days duration 
                </div>
                <br />
                <input type="SUBMIT">
            </center>
        </form>
    </body>
</html>

＆＃13;

Answer 1

您必须使用单独的脚本标记包含jquery库并创建 javascript函数

这是更新的代码

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
Author: Paul 
Calculate Hike Cost Webpage
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <script language="JavaScript" src="jquery-2.1.4.js"></script>
         <script language="JavaScript">
            function showHide(val)
            {
                if (val = 1) {
                    $("#HikeDuration[value=2]").show();
                    $("#HikeDuration[value=3]").show();
                    $("#HikeDuration[value=4]").show();
                    $("#HikeDuration[value=5]").hide();
                    $("#HikeDuration[value=7]").hide();
                }
                else if (val = 2) {
                    $("#HikeDuration[value=2]").hide();
                    $("#HikeDuration[value=3]").hide();
                    $("#HikeDuration[value=4]").hide();
                    $("#HikeDuration[value=5]").show();
                    $("#HikeDuration[value=7]").show();
                } 
                else if (val = 0){
                    $("#HikeDuration[value=2]").hide();
                    $("#HikeDuration[value=3]").show();
                    $("#HikeDuration[value=4]").hide();
                    $("#HikeDuration[value=5]").show();
                    $("#HikeDuration[value=7]").hide();
                }
            }
                </script>
    </head>
    <body>
        <center>
            <h1>
                Calculate the Cost of Your Hike
            </h1>
        </center>
        <br />
        <form action="MyFormServlet" method=GET>
            <center>  
                Choose a Hike 
                <select name="Hikes" id="Hikes" onChange="showHide(this.value)">
                    <option value="" disabled selected>Select your Hike</option>
                    <option value="0">Gardiner Lake</option>
                    <option value="1">Hellroaring Plateau</option>
                    <option value="2">The Beaten Path</option>
                </select>
                <br />
                <label>Hike Start Date:</label>
                <input type="TEXT" name="month" value="MM" style="width: 30px" maxlength="2">
                <input type="TEXT" name="day" value="DD" style="width: 30px" maxlength="2">
                <input type="TEXT" name="year" value="YYYY" style="width: 40px" maxlength="4">
                <br />
               
                Hike Duration:
                <select name="HikeDuration" id="HikeDuration">
                    <option value="" disabled selected>Select your option</option>
                    <option value="2" style="display:none;">2 Days</option>
                    <option value="3" style="display:none;">3 Days</option>
                    <option value="4" style="display:none;">4 Days</option>
                    <option value="5" style="display:none;">5 Days</option>
                    <option value="7" style="display:none;">7 Days</option>
                </select> 
                
                <br />
                Number of Hikers:
                <select name="NumberOfHikers" id="NumberOfHikers">
                    <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">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
                <br />
                <br />
                <div style='border:1px black solid;'>
                    Hiking Season is from 6/1 to 10/1
                    <br />
                    The Gardiner Lake tour: 3 or 5 day duration 
                    <br />
                    The Hellroaring Plateau: 2, 3, or 4 days duration 
                    <br />
                    The Beaten Path trip: 5 or 7 days duration 
                </div>
                <br />
                <input type="SUBMIT">
            </center>
        </form>
    </body>
</html>

＆＃13;

Answer 2

<script language="JavaScript" src="jquery-2.1.4.js">看起来像是从当前的html文件导入一个jquery文件。此语句不会启动您的自定义编写脚本。

在该行下方添加<script>。

像这样：

 <script language="JavaScript" src="jquery-2.1.4.js">
 <script>
    function showHide(val)
    {
        if (val = 1) {
            $("#HikeDuration[value=2]").show();
            $("#HikeDuration[value=3]").show();
            $("#HikeDuration[value=4]").show();
            $("#HikeDuration[value=5]").hide();
            $("#HikeDuration[value=7]").hide();
        }
        else if (val = 2) {
            $("#HikeDuration[value=2]").hide();
            $("#HikeDuration[value=3]").hide();
            $("#HikeDuration[value=4]").hide();
            $("#HikeDuration[value=5]").show();
            $("#HikeDuration[value=7]").show();
        } 
        else if (val = 0){
            $("#HikeDuration[value=2]").hide();
            $("#HikeDuration[value=3]").show();
            $("#HikeDuration[value=4]").hide();
            $("#HikeDuration[value=5]").show();
            $("#HikeDuration[value=7]").hide();
        }
    }
</script>

隐藏和显示列表框选项html / jscript

2 个答案: