Javascript 当表中有多行时，无法选择子选项
我有一个表，它有两列。第一列是选项的主下拉列表，第二列是主下拉列表对应的选项子下拉列表 对于单行，一切都很好，但一旦我有多行，就不会从子下拉菜单中选择任何内容 下面是重现此问题的简单html和JavaScript。如果取消对第二行的注释，您将看到问题。希望有人能在这方面帮助我Javascript 当表中有多行时，无法选择子选项,javascript,html,Javascript,Html,我有一个表，它有两列。第一列是选项的主下拉列表，第二列是主下拉列表对应的选项子下拉列表 对于单行，一切都很好，但一旦我有多行，就不会从子下拉菜单中选择任何内容 下面是重现此问题的简单html和JavaScript。如果取消对第二行的注释，您将看到问题。希望有人能在这方面帮助我 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script language="JavaScript">
function SubCat(cn, scn, scnm)
{
this.CatNum = cn;
this.SubcatNum = scn;
this.SubcatName = scnm;
}
var subcatInfo = new Array(
new SubCat('26', '1', 'MainOpt1_SubOpt1'),
new SubCat('26', '2', 'MainOpt1_SubOpt2'),
new SubCat('27', '3', 'MainOpt2_SubOpt1'),
new SubCat('27', '4', 'MainOpt2_SubOpt2')
);
function doCategory(sel) {
var ix;
var subcat = sel.form.repairSubcategoryCode;
// regardless of what else we do, we wipe out all the
// options in the subcategory dropdown by
// going backwards, removing selected options
for (ix = subcat.options.length - 1; ix >= 0; --ix) {
subcat.options[ix] = null;
}
// now, did the user select a category?
if (sel.selectedIndex == 0) {
// no...so give user the "no subcats" msg
subcat.options[0] = new Option("-- no subcategories yet --", "0");
return; // and we are done
}
// yes, so get the appropriate subcategories:
subcat.options[0] = new Option("-- choose a subcategory below --", "0");
// what category number was selected?
var catnum = sel.options[sel.selectedIndex].value;
var cursc = 0;
for (ix = 0; ix < subcatInfo.length; ++ix) {
// looking for all subcat's with the requested category number
var subcatObj = subcatInfo[ix];
if (subcatObj.CatNum == catnum) {
subcat.options[++cursc] = new Option(subcatObj.SubcatName,
subcatObj.SubcatNum);
}
}
}
</script language="JavaScript">
<form name="priceOpinionForm" method="post" action="/brokerPriceOpinion.do">
<table id="repirImprTab">
<tr>
<td>
<select name="repairTypeCode" onchange="doCategory(this)">
<option value="-1">Select Repair Type</option>
<option value="26">MainOpt1</option>
<option value="27">MainOpt2</option>
</select>
</td>
<td>
<select name="repairSubcategoryCode" >
<OPTION Value="-1">-- now subcategories yet --</option>
</select>
</td>
</tr>
<!--
<tr>
<td>
<select name="repairTypeCode" onchange="doCategory(this)">
<option value="-1">Select Repair Type</option>
<option value="25">Septic Maintenance</option>
<option value="26">Bathroom Items</option>
<option value="27">Cabinets & Shelves</option>
<option value="28">Counter Tops</option>
</select>
</td>
<td>
<select name="repairSubcategoryCode">
<OPTION Value="-1">-- now subcategories yet --</option>
</select>
</td>
</tr>
-->
</table>
</form>
</body>
</html>
HTML表单中的每个命名字段一次只能有一个值。在您的情况下，将有多个名为repairTypeCode和repairSubcategoryCode的选项，如果其中任何一个字段发生更改，则会导致具有相同名称的所有字段都设置为相同的值
修复：将数字索引附加到名称，例如repairTypeCode1、repairTypeCode2、。。。或者将它们转换为数组，例如repairTypeCode[]。正如Kurrija提到的，不能有两个元素的名称相同
下面是一个示例，其中为doCategory方法添加了一个变量，该变量允许代码决定填充哪个子类别下拉列表。我还将name属性更改为id，以提供更好的可读性。对于初学者来说，这是错误的。是的@DreamEater，但是，这根本不是问题所在，也没有破坏代码。非常感谢您的建议。让我试试这些。再次感谢。