我通过大量的试验和错误进行了以下操作.....它可以在网页中运行,但不能作为jquerymobile。 (秒表按钮应更改为'停止"按下'开始按下'。此外,如果我在第一选择下拉列表中重新选择,则下拉框不会清除.I& #39; d也喜欢自动显示的最终下拉列表,而不是选择下拉列表。有人可以帮忙吗?
由于
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
document.getElementById("sub_subcategory").length = 0;
document.getElementById("sub_subcategory").options[0]=new Option("Please select bottom time","");
document.getElementById("subcategory").length = 0;
switch (listindex)
{
case "9" :
document.getElementById("subcategory").options[0]=new Option("No Limit","");
break;
case "12" :
document.getElementById("subcategory").options[0]=new Option("Please select bottom time","");
document.getElementById("subcategory").options[1]=new Option("120","120-12");
document.getElementById("subcategory").options[2]=new Option("165","165-12");
document.getElementById("subcategory").options[3]=new Option("195","195-12");
document.getElementById("subcategory").options[4]=new Option("225","225-12");
document.getElementById("subcategory").options[5]=new Option("255","255-12");
document.getElementById("subcategory").options[6]=new Option("330","330-12");
document.getElementById("subcategory").options[7]=new Option("390","390-12");
document.getElementById("subcategory").options[8]=new Option("660","660-12");
document.getElementById("subcategory").options[9]=new Option("Over 660","Over 660-12");
break;
case "15" :
document.getElementById("subcategory").options[0]=new Option("Please select bottom time","");
document.getElementById("subcategory").options[1]=new Option("75","75-15");
document.getElementById("subcategory").options[2]=new Option("105","105-15");
document.getElementById("subcategory").options[3]=new Option("120","120-15");
document.getElementById("subcategory").options[4]=new Option("135","135-15");
document.getElementById("subcategory").options[5]=new Option("145","145-15");
document.getElementById("subcategory").options[6]=new Option("160","160-15");
document.getElementById("subcategory").options[7]=new Option("170","170-15");
document.getElementById("subcategory").options[8]=new Option("190","190-15");
document.getElementById("subcategory").options[9]=new Option("240","240-15");
document.getElementById("subcategory").options[10]=new Option("360","360-15");
document.getElementById("subcategory").options[11]=new Option("450","450-15");
document.getElementById("subcategory").options[12]=new Option("Over 450","Over 450-15");
break;
}
return true;
}
function dynamicdropdownone(listindex)
{
document.getElementById("sub_subcategory").length = 0;
switch (listindex)
{
case "120-12" :
document.getElementById("sub_subcategory").options[0]=new Option("No Stops required","");
break;
case "165-12" :
document.getElementById("sub_subcategory").options[0]=new Option("5min @ 3M","");
break;
case "195-12" :
document.getElementById("sub_subcategory").options[0]=new Option("10min @ 3M","");
break;
case "225-12" :
document.getElementById("sub_subcategory").options[0]=new Option("15min @ 3M","")
break;
case "255-12" :
document.getElementById("sub_subcategory").options[0]=new Option("20min @ 3M","");
break;
case "330-12" :
document.getElementById("sub_subcategory").options[0]=new Option("25min @ 3M","");
break;
case "390-12" :
document.getElementById("sub_subcategory").options[0]=new Option("30min @ 3M","");
break;
case "660-12" :
document.getElementById("sub_subcategory").options[0]=new Option("35min @ 3M","");
break;
case "Over 660-12" :
document.getElementById("sub_subcategory").options[0]=new Option("40min @ 3M","");
break;
case "75-15" :
document.getElementById("sub_subcategory").options[0]=new Option("No Stops required","");
break;
case "105-15" :
document.getElementById("sub_subcategory").options[0]=new Option("5min @ 3M","");
break;
case "120-15" :
document.getElementById("sub_subcategory").options[0]=new Option("10min @ 3M","");
break;
case "135-15" :
document.getElementById("sub_subcategory").options[0]=new Option("15min @ 3M","")
break;
case "145-15" :
document.getElementById("sub_subcategory").options[0]=new Option("20min @ 3M","");
break;
case "160-15" :
document.getElementById("sub_subcategory").options[0]=new Option("25min @ 3M","");
break;
case "170-15" :
document.getElementById("sub_subcategory").options[0]=new Option("(5min @ 6M) -- (25min @ 3M)","");
break;
case "190-15" :
document.getElementById("sub_subcategory").options[0]=new Option("(5min @ 6M) -- (30min @ 3M)","");
break;
case "240-15" :
document.getElementById("sub_subcategory").options[0]=new Option("1(0min @ 6M) -- (40min @ 3M)","");
break;
case "360-15" :
document.getElementById("sub_subcategory").options[0]=new Option("30min @ 6M -- 40min @ 3M","");
break;
case "450-15" :
document.getElementById("sub_subcategory").options[0]=new Option("35min @ 6M -- 40min @ 3M","");
break;
case "Over 450-15" :
document.getElementById("sub_subcategory").options[0]=new Option("35min @ 6M -- 45min @ 3M","");
break;
default:
}
return true;
}
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Divesupervisor</h1>
</div>
<div class="category_div" id="category_div">
<p> </p>
<p>Please select depth:
<select name="category" class="required-entry" id="category" onChange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Depth in meters</option>
<option value="9">9</option>
<option value="12">12</option>
<option value="15">15</option>
</select>
</p>
<p> </p>
</div>
<div class="sub_category_div" id="sub_category_div">
<p>Please select bottom time:
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory" onchange="javascript: dynamicdropdownone(this.options[this.selectedIndex].value);"><option value="">Time in minutes</option></select>')
</script>
<noscript>
<select name="subcategory" id="subcategory" >
<option value="">Time in minutes</option>
</select>
</noscript>
</p>
<p> </p>
</div>
<div class="sub_subcategory_div" id="sub_subcategory_div">Decompression stops:
<script type="text/javascript" language="JavaScript">
document.write('<select name="sub_subcategory" onchange="javascript: urlRedirectTo(this.options[this.selectedIndex].value);" id="sub_subcategory"><option value="">Stops required</option></select>')
</script>
<noscript>
<select name="sub_subcategory" id="sub_subcategory" >
<option value="">Required stops</option>
</select>
</noscript>
<script language="JavaScript" type="text/javascript">
var sec = -1;
var min = 0;
var hour = 0;
function stopwatch(text) {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1; }
else {
min = min; }
if (min == 60) {
min = 0;
hour += 1; }
if (sec<=9) { sec = "0" + sec; }
document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
if (text == "Start") { document.clock.theButton.value = "Stop "; }
if (text == "Stop ") { document.clock.theButton.value = "Start"; }
if (document.clock.theButton.value == "Start") {
window.clearTimeout(SD);
sec=sec-1;
return true; }
SD=window.setTimeout("stopwatch();", 1000);
}
function resetIt() {
sec = -1;
min = 0;
hour = 0;
if (document.clock.theButton.value == "Stop ") {
document.clock.theButton.value = "Start"; }
window.clearTimeout(SD);
}
</script>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF" alink="#FF0000">
</div>
<tr valign="top">
<td width="10%" bgcolor="#c5c3c4" align="left"><br /></td><td><p><table align="center" width="80%" cellspacing="0">
<tr>
<td align="center">
<form name="clock"><br />
<input type="text" size="12" name="stwa" /><br />
<input type="button" name="theButton" onClick="stopwatch(this.value);" value="Start" />
<input type="button" value="Reset" onClick="resetIt();reset();" />
</form>
</td>
</tr>
</table>
</td></tr><tr valign="top"><td colspan="2"><br /><div align="center">
</div></body></html>
<div data-role="footer">
<h4>----</h4>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
知道这不是(还)一个答案(我可以在以后删除,如有必要),但我不能将这些细节/信息中的任何一个放在原始帖子的常规评论中......
=====
您使用的是哪种设备?在Nexus 6P上,您提到的方面对我来说似乎正常。
但是,要使用您的代码,我必须将jquery源与我所拥有的相匹配,这是更新的,并且我 NOT 表示您需要更新这些文件。
知道有一些标记放置(和其他)投诉,可能会导致旧手机/平板电脑设备出现布局和/或其他问题。
您应该能够在编辑器中轻松匹配这些行号。确保<!DOCTYPE html>
位于第一行。我没有添加或删除任何行,但只复制/粘贴您的代码。您在底部附近有两个结束</body>
和</html>
标记。知道使用<script>
标记不再需要属性language
,并且属性type
对HTML5是可选的。
这是我手机上运行的一些屏幕截图:(不按任何特定顺序排列)
我暂时停在这里。如果需要,请随时提出任何问题。
哦,在旁注...如果它可能有助于为您解除HTML的混乱,将所有的javascript代码移动到一个单独的文件中,然后使用脚本标记引用该文件的方式与使用src
属性的jquery文件。如果你愿意的话,你可以暂时保留它,因为这只是一个建议。