隐藏和显示列表框选项html/jscript
hide and show listbox options html/jscript
好的，我试图使它，所以持续时间列表框隐藏，并显示某些选项时，不同的远足选择。我有问题让函数运行，它说函数没有定义，我有麻烦看到错误在哪里
<!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><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>
您必须使用separate script标签来包含jquery库并创建javascript函数
这里是更新后的代码
<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>相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何将HTML id分配给元素，以及如何将JavaScript应用于元素
- 如何编写HTML输入的JS内联
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量
- Microsoft JScript运行时错误:对象没有't支持属性或方法'html'
- 如何使用在 jscript 中声明的参数调用 Html.RenderAction(）
- HTA/HTML/VBScript/JScript Issue
- NodeJS服务器，res.sendfile返回HTML但不返回jscript include "(& lt;
- HTML搜索功能使用JScript (JQuery)和JSON
- 如何访问Html.下拉列表从单独的Jscript文件
- 隐藏和显示列表框选项html/jscript
- 如何从ajax加载的html文件加载jscript
- 当季节背景发生变化时，我如何修改代码，使html和jscript同时工作
- 使用JScript将新行动态添加到HTML表中
- ABCPdf给出“;无法呈现HTML.无法应用JScript“;即使使用简单的OnLoadScript
- 如何显示JSON对象使用xmlhttprequest和异步只有HTML/Jscript只有
