-1

2列のテーブルがあります。最初の列はオプションのメイン ドロップダウン リストで、2 番目の列はメイン ドロップダウンの対応するオプションのサブ ドロップダウン リストです。

単一の行ではすべてが正常に機能しますが、複数の行があるとすぐに、サブドロップダウン メニューから何も選択されません。

以下は、この問題を再現するための簡単な html と JavaScript です。2 行目のコメントを外すと、問題が発生します。誰かがこれで私を助けてくれることを願っています。

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

HTML フォームのすべての名前付きフィールドは、一度に 1 つの値しか持つことができません。あなたの場合、「repairTypeCode」と「repairSubcategoryCode」という名前の複数の選択があり、それらのいずれかが変更された場合、同じ名前のすべてのフィールドが同じ値に設定されます。

修正: 名前に数値インデックスを追加するか (例: "repairTypeCode1"、"repairTypeCode2"、...)、配列に変換します (例: "repairTypeCode[]")。

于 2013-03-26T16:10:10.837 に答える
0

Kurrija が述べたように、2 つの要素に同じ名前を付けることはできません。

これは、コードがどのサブカテゴリドロップダウンに入力するかを決定できるようにするメソッドの変数が追加されたjsfiddleです。読みやすくするために、属性もdoCategory変更しました。nameid

于 2013-03-26T16:19:22.297 に答える