Мне сложно провести время, чтобы понять, почему следующий код не работает:
test.cgi:
#!/usr/bin/perl -w
use CGI;
$cgi = new CGI;
$cgi->autoEscape(undef);
%ptype = ("0","","1","Pennsylvania","2","New York","3","Ohio");
print $cgi->header('text/html'),
$cgi->start_html(-title=>'Test',-script=>[{-type=>'javascript',-src =>'/scripts/test.js'}]),
$cgi->start_form(-method=>'GET',id=>'frmMain',-name=>'frmMain',-enctype=>'multipart/form-data'),
$cgi->popup_menu(-style=>'width:200',name=>'ProblemType',-values=>\%ptype,-onChange=>'PopulateSType()',-default=>'0'),
$cgi->popup_menu(-style=>'width:200',name=>'SubProblemType',-values=>''),
$cgi->end_form,
$cgi->end_html();
test.js:
function PopulateSType() {
var ProblemList = document.frmMain.ProblemType;
ClearOptions(document.frmMain.SubProblemType);
if (ProblemList[ProblemType.selectedIndex].value == "1") {
AddToOptionList(document.frmMain.SubProblemType, "0", "");
AddToOptionList(document.frmMain.SubProblemType, "1", "Pittsburgh");
AddToOptionList(document.frmMain.SubProblemType, "2", "Philadelphia");
AddToOptionList(document.frmMain.SubProblemType, "3", "Harrisburg");
}
if (ProblemList[ProblemType.selectedIndex].value == "2") {
AddToOptionList(document.frmMain.SubProblemType, "0", "");
AddToOptionList(document.frmMain.SubProblemType, "1", "New York");
AddToOptionList(document.frmMain.SubProblemType, "2", "Buffalo");
AddToOptionList(document.frmMain.SubProblemType, "3", "Middletown");
}
if (ProblemList[ProblemType.selectedIndex].value == "3") {
AddToOptionList(document.frmMain.SubProblemType, "1", "Cleveland");
AddToOptionList(document.frmMain.SubProblemType, "2", "Cincinatti");
AddToOptionList(document.frmMain.SubProblemType, "3", "Akron");
}
}
function ClearOptions(OptionList) {
for (x = OptionList.length; x >= 0; x = x - 1) {
OptionList[x] = null;
}
}
function AddToOptionList(OptionList, OptionValue, OptionText) {
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}
Пример источника вывода:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title>Process Alarm</title>
<script language="JavaScript" src="/scripts/test.js" type="javascript"></script>
</head><body><form method="get" action="/cgi-bin/test.cgi/test.cgi?null" enctype="multipart/form-data" name="frmMain" id="frmMain">
<select name="ProblemType" onchange="PopulateSType()" style="width:200">
<option value="1">Pennsylvania</option>
<option value="3">Ohio</option>
<option selected="selected" value="0"></option>
<option value="2">New York</option>
</select><select name="SubProblemType" style="width:200">
<option value=""></option>
</select></form></body></html>
Все выглядит так, как будто он должен работать, но при загрузке страницы ничего не происходит со второй кнопкой выбора. Кажется, что поражение или промах, если стиль ширины применяется, когда страница загружается. Я даже попробовал window.onload = load;
в верхней части test.js. Единственное, что я вижу, что может быть ошибкой, - это perl форматирование onChange как onchange.
java отлично работает в обычном HTML, у него просто возникают проблемы при попытке реализовать это в perl. Я использую пример из здесь
<script language="JavaScript" src="/scripts/test.js" type="javascript">
Это должен быть type="text/javascript"
, тип MIME-носителя для JS, поддерживаемый браузерами. type="javascript"
сам по себе не будет распознан. (language="javascript"
устарело.)
style="width:200"
должен быть 200px
.
for (x = OptionList.length; x >= 0; x = x - 1) {
OptionList[x] = null;
}
Не уверен, что null
будет работать. Традиционная быстрая идиома:
OptionList.length= 0;