Question

我有一张表，有两列。第一列是maindrop下载选项列表，第二列是主下拉列表的相应子下拉列表。

单行的一切正常，但只要我有多行，就不会从子下拉菜单中选择任何内容。

下面是简单的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>

Answer 1

HTML表单中的每个命名字段一次只能有一个值。在您的情况下，会有多个名为“repairTypeCode”和“repairSubcategoryCode”的选项，如果其中任何一个字段发生更改，则会导致所有具有相同名称的字段设置为相同的值。

修复：在名称后附加一个数字索引（例如“repairTypeCode1”，“repairTypeCode2”，...）或将它们转换为数组（例如“repairTypeCode []”）。

Answer 2

AS Kurrija提到，你不能有两个相同的元素。

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

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

2 个答案: