0

我正在使用下面的javascript代码来隐藏/如何基于所选项目类型的部分。下面数组中的值是从保管箱中选择的值。下面的 id 是部分/字段集 id [我知道它们是数字,但这是我们获得应用程序的方式,所以现在坚持使用它]。我想有多个这样的值:

值:“广告”,值:“小册子”,值:“巴士套”

所以基本上我想说:如果value等于 Ad BrochureBus Wrap,则显示 id 838。我无法让它工作。如何将“或”运算符合并到此代码中?

//Project Types
var projectTypes = new Array (
    {id : '838', value: 'Ad'},
    {id : '838', value: 'Cars'},
    {id : '839', value: 'Brochure'},
    {id : '839', value: 'Planes'},
    {id : '840', value: 'Bus Wrap'},
    {id : '840', value: 'Boats'}
);

refreshSections(project_type);  

function refreshSections(selectedType) 
{   
    for (var i = 0; i < projectTypes.length; i++) 
    {
        if (projectTypes[i].value == selectedType) 
        {
            document.getElementById("section-"+ projectTypes[i].id).style.display = '';
        } 
        else 
        {
            document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
        }
    }
}

这是我想要完成的 html 示例:

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Project Overview</title>
    <script type="text/javascript">
    var projectType_Field_Id = '1169';

    //Project Types
    var projectTypes = new Array (
        {id : '11', value:'Cars'},
        {id : '12', value:'Boats'},
        {id : '13', value:'Planes'}

        );

    //occurs onLoad
    function formOnLoad()
    {
        var project_type = document.getElementById(projectType_Field_Id).value;
        refreshSections(project_type);
        }
    /*
     *  Onchange - Project Type
     */
    function projectTypeChange()
    { 
        var project_type = document.getElementById(projectType_Field_Id).value;
        refreshSections(project_type);
    }

    function refreshSections(selectedType) 
    {    
        for (var i = 0; i < projectTypes.length; i++) 
        {
            if (projectTypes[i].value == selectedType) 
            {
                document.getElementById("section-"+ projectTypes[i].id).style.display = '';
            } else {
                document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
            }
        }

    }


    </script>
    </head>

    <body onload="formOnLoad();">
    <form method="post" action="">
    <fieldset name="mainSection">
                    <legend style="color:blue; font-weight:bold">Project Overview Section</legend>

                    <table style="width: 100%">
                        <tr>
                            <td style="height: 33px; width: 178px; color:maroon">Name</td>
                            <td style="height: 33px"><input  id="1125" name="1125" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="height: 33px; width: 178px; color:maroon">Email</td>
                            <td style="height: 33px"><input  id="1026" name="1026" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="width: 178px">Product Title</td>
                            <td><input  id="1089" name="1089" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="width: 178px">Product Type</td>
                            <td><select id="1169" name="1169"  onChange="projectTypeChange();">
                            <option value="">Select</option>
                            <option value="Cars">Cars</option>
                            <option value="Boats">Boats</option>
                            <option value="Planes">Planes</option>
                            <option value="Trains">Trains</option>
                            <option value="Skateboard">Skateboard</option>
                            <option value="Helicopter">Helicopter</option>

                            </select></td>
                        </tr>
                                        </table>
                </fieldset><br /><br />

                <fieldset id="section-11" name="section-11">
                    <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>

                    <table cellpadding="2" style="width: 100%">
                        <tr>
                            <td style="width: 334px; height: 35px"><label style="color:maroon">Size:</label></td>
                            <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Color:</td>
                            <td style="height: 35px">
                            <select id="1433" name="1433">
                    <option value="Orange">Orange</option>
                            <option value="Blank">Blank</option>
                            <option value="Green">Green</option>
                </select></td>
                        </tr>
                        <tr>
                            <td style="width: 334px">Description:</td>
                            <td>
                            <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                        </tr>
                    </table>
                                </fieldset>
                                <br />
                <fieldset id="section-12" name="section-12">
                    <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>

                    <table cellpadding="2" style="width: 100%">
                        <tr>
                            <td style="width: 334px; height: 35px"><label  style="color:maroon">Size:</label></td>
                            <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Color:</td>
                            <td style="height: 35px">
                            <select id="1433" name="1433">
                    <option value="Orange">Orange</option>
                            <option value="Blank">Blank</option>
                            <option value="Green">Green</option>
                </select></td>
                        </tr>
                        <tr>
                            <td style="width: 334px">Description:</td>
                            <td>
                            <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                        </tr>
                    </table>
                                </fieldset><br />
                <fieldset id="section-13" name="section-13">
                    <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>

                    <table cellpadding="2" style="width: 100%">
                        <tr>
                            <td style="width: 334px; height: 35px"><label  style="color:maroon">Size:</label></td>
                            <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Color:</td>
                            <td style="height: 35px">
                            <select id="1433" name="1433">
                    <option value="Orange">Orange</option>
                            <option value="Blank">Blank</option>
                            <option value="Green">Green</option>
                </select></td>
                        </tr>
                        <tr>
                            <td style="width: 334px">Description:</td>
                            <td>
                            <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                        </tr>
                    </table>
                                </fieldset>
    <fieldset id="section-1011" name="section-1011">
                    <legend style="color:green; font-weight:bold">Misc Info Section</legend>

                    <table cellpadding="2" style="width: 100%">
                        <tr>
                            <td style="width: 334px; height: 35px"><label>Size:</label></td>
                            <td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
                        </tr>
                        <tr>
                            <td style="height: 35px; width: 334px">Color:</td>
                            <td style="height: 35px">
                            <select id="1302" name="1302">
                    <option value="Orange">Orange</option>
                            <option value="Blank">Blank</option>
                            <option value="Green">Green</option>
                </select></td>
                        </tr>
                        <tr>
                            <td style="width: 334px">Description:</td>
                            <td>
                            <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
                        </tr>
                    </table>
                                </fieldset>
                                <input name="Send Job" type="submit" value="Send Job" />

    </form>
4

1 回答 1

1

看起来在你的 for 循环中,你只需要检查你是否selectedType匹配projectTypes. 试试这个 -

for (var i = 0; i < projectTypes.length; i++) 
{
    if (projectTypes[i].value == selectedType) 
    {
        document.getElementById("section-"+ projectTypes[i].id).style.display = '';
        break;
    } 

}

这只会在匹配项目类型时显示您的元素,然后在匹配后立即跳出循环。

于 2012-04-26T13:23:48.010 回答