当表中有多个行时，无法选择子选项

-1

我有一个表，它有2列。第一列是选项的主要下拉列表，第二列是主下拉列表的相应选项下拉列表。当表中有多个行时，无法选择子选项

一切工作正常的单行，但只要我有多行，没有任何东西从下拉菜单中选择。

下面是重现此问题的简单html和JavaScript。如果您取消注释第二行，您会看到问题。希望有人能帮助我。

<!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 &amp; 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>

来源

2013-03-26 Dani Han

对于初学者，''是错误的。 – hjpotter92 2013-03-26 16:08:44

是的@DreamEater，但是，这不是问题，并没有打破代码。 – 2013-03-26 16:24:07

HTML表单中的每个命名字段一次只能有一个值。在你的情况下，将会有多个名为“repairTypeCode”和“repairSubcategoryCode”的选择，这将导致具有相同名称的所有字段被设置为相同的值，如果其中任何一个被更改。修复：为名称追加数字索引（例如“repairTypeCode1”，“repairTypeCode2”，...）或将其转换为数组（例如“repairTypeCode []”）。

来源

2013-03-26 16:10:10 Kurrija

非常感谢你的建议。让我试试这些。再次感谢。 – 2013-03-26 21:47:50

作为Kurrija提到，你不能有两个名称相同的元素。

这是一个jsfiddle，它为doCategory方法添加了一个变量，它允许代码决定填充哪个子类别下拉列表。我已将name属性更改为id以提供更好的可读性。

来源

2013-03-26 16:19:22

当表中有多个行时，无法选择子选项

回答

相关问题