How do I incorporate the "or" operator into my javascript array code?

Question

I am using the javascript code below to hide/how section based on project type selected. The value in the array below is the value selected from a dropbox. The id below is the section/fieldset id [i know they are numeric, but that's the way we got the app, so stuck with it right now]. I want to have multiple values like this:

value: "Ad", value: "brochure", value: "Bus wrap"

so basically I want to say: if value equals Ad or Brochure or Bus Wrap, display id 838. I can't get this to work. How do I incorporate the "or" operator into this code?

//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';
        }
    }
}

Here is an html sample of what I want to accomplish:

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

score 1 · Accepted Answer · answered Apr 26 '12 at 13:23

1

It looks like in your for loop, you only need to check if your selectedType matches one of the projectTypes. Try this -

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

}

This will only show your element when it matches a project type, and then break out of the loop right after matching.

answered Apr 26 '12 at 13:23

rosscj2533

9,195
7
39
56

Wow rosscj2533 the [break;] is so close to what I want, but what I notice is the not turning off a fieldset, so if I select Ad, it displays fieldset 1, if I then select Brochure, it displays fieldset 2, but it does not hide fieldset 1 – user1176783 Apr 26 '12 at 13:41
@user1176783 - I didn't fully understand what your were trying to do, try incorporating jbabey's answer's `if` logic piece and see if that gets what you want. Otherwise if you post your html or a full working example, I'll take another look. – rosscj2533 Apr 26 '12 at 13:55
rosscj2533 I place a hide function at the beginning of my function that works. Thanks so much. – user1176783 Apr 26 '12 at 15:27

How do I incorporate the "or" operator into my javascript array code?

1 Answers1