-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>
4

2 回答 2

0

正如 Kurrija 提到的，您不能将两个元素命名相同。

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

于 2013-03-26T16:19:22.297 回答
0

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

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

于 2013-03-26T16:10:10.837 回答