Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Oregon
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Getting Drop downs to "reset"

    I am using Javascript so that when someone selects their state in a drop-down another one appears where they can select their city. Then once they do that information appears about sales reps in their area. This is working great except that if someone selects a state and city then decides to pick a different state the old information stays and nothing happens. I hope I'm explaining this clearly, but if I select the state and the second drop down appears and I change the state without selecting a city it "resets" like I want it to but not if I've already selected a city. does that make sense? So I'm not sure how to make it work. This is the code I have:
    Code:
    <select id = "opts" onchange = "showForm()">
    <option value = "0">Select Your State</option>
    <option value = "AZ">Arizona</option>
    <option value = "CA">California</option>
    <option value = "CO">Colorado</option>
    <option value = "ID">Idaho</option>
    <option value = "MT">Montana</option>
    <option value = "NV">Nevada</option>
    <option value = "NM">New Mexico</option>
    <option value = "OR">Oregon</option>
    <option value = "TX">Texas</option>
    <option value = "UT">Utah</option>
    <option value = "WA">Washington</option>
    <option value = "WY">Wyoming</option>
    <option value = "Oth">Other</option>
    
    </select>
    
    <div id = "showCA" style="display:none">
    <form name= "CAform">
    <select id = "SelectCA" onchange = "showForm()">
    <option value = "0">Select Area</option>
    <option value = "1">Northern California</option>
    <option value = "2">LA County</option>
    <option value = "3">Kern County</option>
    <option value = "4">Orange County</option>
    <option value = "5">San Luis Obispo County</option>
    <option value = "6">Santa Barbara County</option>
    <option value = "7">Ventura County</option>
    </select>
    </form>
    </div>
    
    <div id = "showTX" style="display:none">
    <form name= "TXform">
    <select id = "SelectTX" onchange = "showForm()">
    <option value = "0">Select City</option>
    <option value = "ep">EL Paso</option>
    <option value = "TXoth">Other</option>
    </select>
    </form>
    </div>
    
    <div id = "showNV" style="display:none">
    <form name= "NVform">
    <select id = "SelectNV" onchange = "showForm()">
    <option value = "0">Select Area</option>
    <option value = "NN">Northern Nevada</option>
    <option value = "SN">Southern Nevada</option>
    </select>
    </form>
    </div>
    
    <div id = "df" class="unrep" style="display:none">
    <h6>Dave Fellows</h6>
    <p>
    101 W Prairie Shopping Ctr. PMB#352<br />
    Hayden, ID 83835<br />
    Email: DWFellows2@yahoo.com<br />
    Ph: (208) 691-5465<br />
    Fx: (208) 772-4025<br />
    Areas Served:<br />
    OR, WA, ID, MT, & WY
    </p>
    </div>
    
    <div id = "wom" class="unrep" style="display:none">
    <h6>Woman In Motion</h6>
    <p>
    McKenzi Maxwell<br />
    425 North Locust Ave.<br />
    Lindon, UT 84042<br />
    Email: Doors3068@aol.com<br />
    Office: (801) 785-9852<br />
    Areas Served:<br />
    Utah, Colorado, Texas (except El Paso)
    </p>
    </div>
    
    <div id = "th" class="unrep" style="display:none">
    <h6>Hansen Sales Group</h6>
    <p>
    Todd Hansen<br />
    3125 E Rock Wren Rd<br />
    Phoenix, AZ 85048<br />
    Email: Todd@Hansensales.com<br />
    Office: (480) 759-5959<br />
    Areas Served:<br />
    Southern NV, AZ, NM, El Paso TX
    </p>
    </div>
    
    <div id = "mm" class="unrep" style="display:none">
    <h6>Mike Mays</h6>
    <p>
    4426 Spring Wood Dr.<br />
    Napa, CA 94558<br />
    Email: DorRep@SBCGlobal.net<br />
    Cell: (707) 293-4276<br />
    Areas Served:<br />
    Northern CA, Northern Nevada
    </p>
    </div>
    
    <div id = "mt" class="unrep" style="display:none">
    <h6>Tarca & Associates</h6>
    <p>
    Mark Tarca<br />
    Email: MTarca@Tarcaassociates.com<br />
    Office: (888) 461-0008<br />
    Areas Served:<br />
    Southern California
    </p>
    </div>
    
    <div id = "mikemcf" style="display:none">
    <h6>NO REP AVAILABLE</h6>
    <p>
    MCFARLAND DOOR</p>
    </div>
    
    
    
    <script type = "text/javascript">
        function showForm() {
            var selopt = document.getElementById("opts").value;
            if (selopt == "CA") {
                document.getElementById("showTX").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "block";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "TX") {
                document.getElementById("showTX").style.display = "block";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "OR") {
                document.getElementById("df").style.display = "block";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "WA") {
                document.getElementById("df").style.display = "block";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "ID") {
                document.getElementById("df").style.display = "block";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "MT") {
                document.getElementById("df").style.display = "block";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "WY") {
                document.getElementById("df").style.display = "block";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "UT") {
                document.getElementById("wom").style.display = "block";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "CO") {
                document.getElementById("wom").style.display = "block";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "AZ") {
                document.getElementById("wom").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("th").style.display = "block";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "NM") {
                document.getElementById("wom").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("th").style.display = "block";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "NV") {
                document.getElementById("showNV").style.display = "block";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("opts").value;
            if (selopt == "Oth") {
                document.getElementById("mikemcf").style.display = "block";
                document.getElementById("wom").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("showTX").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
    
            var selopt = document.getElementById("SelectNV").value;
            if (selopt == "NN") {
                document.getElementById("showTX").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "block";
                document.getElementById("mm").style.display = "block";
                document.getElementById("mt").style.display = "none";
            }
            var selopt = document.getElementById("SelectNV").value;
            if (selopt == "SN") {
                document.getElementById("showTX").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "block";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "block";
                document.getElementById("mm").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
    
            var selopt = document.getElementById("SelectCA").value;
            if (selopt == "1") {
                document.getElementById("showTX").style.display = "none";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "block";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mm").style.display = "block";
                document.getElementById("mt").style.display = "none";
            }
         
      
            var selopt = document.getElementById("SelectTX").value;
            if (selopt == "ep") {
                document.getElementById("showTX").style.display = "block";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("wom").style.display = "none";
                document.getElementById("th").style.display = "block";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mm").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
    
            var selopt = document.getElementById("SelectTX").value;
            if (selopt == "TXoth") {
                document.getElementById("showTX").style.display = "block";
                document.getElementById("df").style.display = "none";
                document.getElementById("showCA").style.display = "none";
                document.getElementById("wom").style.display = "block";
                document.getElementById("th").style.display = "none";
                document.getElementById("mikemcf").style.display = "none";
                document.getElementById("showNV").style.display = "none";
                document.getElementById("mm").style.display = "none";
                document.getElementById("mt").style.display = "none";
            }
        }
    </script>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You have a lot of code there for trying to do something relatively simple.

    Take a look at http://www.felgall.com/jstip120.htm for an alternative approach that needs far less code.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    All that repetition of code indicates that you can simplify it a good deal, as felgall indicates.

    Shorten the very many instances of document.getElementById()
    to just one character
    function $(id) {return document.getElementById(id) }
    accessed by e.g.
    $("showTX").style.display = "none";

    Why do you keep repeating
    var selopt = document.getElementById("opts").value;

    You should at the outset of the function set all the style display attributes to none, then change the relevent ones to block according to the user's selection made.


    But the answer to your question is when a state is selected from your dropdown (onchange) reset the selectedIndex of the city dropdown to 0. That forces the user to select a state before a city.

    IMO not very good idea to assign the id opts to a select list when there are several.

    The Jews were a proud people and throughout history they had trouble with unsympathetic genitals. - Pupil's answer to Catholic Elementary School test.
    Last edited by Philip M; 01-24-2013 at 01:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Jan 2013
    Location
    Oregon
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post

    But the answer to your question is when a state is selected from your dropdown (onchange) reset the selectedIndex of the city dropdown to 0. That forces the user to select a state before a city.
    I'm not sure how to do that... The only reason I have so much code is because it was the only way I could figure out to do it! I'm certainly open to suggestions but despite the fact that each thing is set to display:none if I don't tell it to be display none again in each script it shows up anyway! How do I do what you are describing?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    What is the point in having selectCA and then ignoring it unless the selected option is Northern California?

    And it's silly to have just two options in Texas and Nevada.

    Why not just do something like this:
    Code:
    <select name="regions" onchange = "changeDisplay(this.value)">
    <option value = "">Select Your State or Region</option>
    <option value = "AZ">Arizona</option>
    <option value = "CAN">California, Northern</option>
    <option vlaue = "CAS">California, Other</option>
    <option value = "CO">Colorado</option>
    <option value = "ID">Idaho</option>
    <option value = "MT">Montana</option>
    <option value = "NVN">Nevada, Northern</option>
    <option value = "NVS">Nevada, Southern</option>
    <option value = "NM">New Mexico</option>
    <option value = "OR">Oregon</option>
    <option value = "TXEP">Texas, El Pason only</option>
    <option value = "TX">Texas, Other</option>
    <option value = "UT">Utah</option>
    <option value = "WA">Washington</option>
    <option value = "WY">Wyoming</option>
    <option value = "Oth">Other</option>
    </select>
    And then we could do all the rest of it VERY VERY easily by simply looking for those abbreviations in a hidden <span> in each div.

    Such as:
    Code:
    <style type="text/css">
    .unrep { display: none; }
    .regions { display: none; }
    ...
    </style>
    ...
    <div class="unrep">
    <span class="regions">CAN,NVN</span>
    <h6>Mike Mays</h6>
    <p>
    4426 Spring Wood Dr.<br />
    Napa, CA 94558<br />
    Email: DorRep@SBCGlobal.net<br />
    Cell: (707) 293-4276<br />
    Areas Served:<br />
    Northern CA, Northern Nevada
    </p>
    </div>
    With JS code as simple as something like this:
    Code:
    function changeDisplay(toRegion)
    {
        // convert the region we are looking for into a regular expression
        var lookfor = new RegEx( "\\b" + toRegion + "\\b", "i" );
    
        // check all divs...
        var divs = document.getElementByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            var div = divs[d];
            // if this is one we are controlling:
            if ( div.className == "unreps" )
            {
                div.style.display = "none"; // assume not the right one
                // what regions are served by this rep?
                var served = div.getElementsByTagName("span")[0].innerHTML;
                if ( lookfor.test(served) )
                {
                    // this rep serves the region requested
                    div.style.display = "block"; // so show it
                }
            }
        }
    }
    And now *ALL* of your JS code can be dumped.

    If you really feel you must have the CA, NV, TX <select>s, we can incorporate them.
    But please, not with the ugly code you used.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    samuelito.mcf (01-24-2013)

  • #6
    New Coder
    Join Date
    Jan 2013
    Location
    Oregon
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the well explained response! I could do that but I liked the idea of having two separate drop downs just so its a little more clear. Haha I know my code stinked that's what I'm here for ha

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    We *can* do the extra drop downs. It's not that much more work.

    But the "trick" of embedding the info about the regions in the <span> (or similar) is still the right answer for that part of it, I think.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Jan 2013
    Location
    Oregon
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Yeah I think that's definitely better than what I have. How would I incorporate the multiple drop downs?

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I already posted a link to a page showing all the code necessary to do this in my first reply. If you had looked at that page then you would see how to get rid of the unnecessary repetitive code.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    I guess I knew I was going to regret saying that. <grin/>
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Sales Reps</title>
    <style type="text/css">
    .unrep { display : none; }
    .regions { display : none; }
    .states { display : none; }
    h6 { font-size: x-large; font-weight: bold; }
    </style>
    </head>
    <body>
    <form id="theForm">
    
    <select name="stateChoice">
    <option value = "">Select Your State or Region</option>
    <option value = "AZ">Arizona</option>
    <option value = "*CA">California</option>
    <option value = "CO">Colorado</option>
    <option value = "ID">Idaho</option>
    <option value = "MT">Montana</option>
    <option value = "*NV">Nevada</option>
    <option value = "NM">New Mexico</option>
    <option value = "OR">Oregon</option>
    <option value = "*TX">Texas</option>
    <option value = "UT">Utah</option>
    <option value = "WA">Washington</option>
    <option value = "WY">Wyoming</option>
    <option value = "Oth">Other</option>
    </select>
    <div id="theStates">
        <div class="states" id="CA">
            <select name="regionChoice">
                <option value="">Choose a region</option>
                <option value="CAN">Northern California</option>
                <option value="CAS">Southern California</option>
            </select>
        </div>
        <div class="states" id="NV">
            <select name="regionChoice">
                <option value="">Choose a region</option>
                <option value="NVN">Northern Nevada</option>
                <option value="NVS">Southern Nevada</option>
            </select>
        </div>
        <div class="states" id="TX">
            <select name="regionChoice">
                <option value="">Choose a region</option>
                <option value="TXEP">Texas, El Pason only</option>
                <option value="TX">Texas, other </option>
            </select>
        </div>
    </div>
    
    </form>
    
    <div id="theReps">
        <div class="unrep">
            <span class="regions">OR,WA,ID,MT,WY</span>
            <h6>Dave Fellows</h6>
            <p>
            101 W Prairie Shopping Ctr. PMB#352<br />
            Hayden, ID 83835<br />
            Email: DWFellows2@yahoo.com<br />
            Ph: (208) 691-5465<br />
            Fx: (208) 772-4025<br />
            Areas Served:<br />
            OR, WA, ID, MT, & WY
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">UT,CO,TX</span>
            <h6>Woman In Motion</h6>
            <p>
            McKenzi Maxwell<br />
            425 North Locust Ave.<br />
            Lindon, UT 84042<br />
            Email: Doors3068@aol.com<br />
            Office: (801) 785-9852<br />
            Areas Served:<br />
            Utah, Colorado, Texas (except El Paso)
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">NVS,AZ,NM,TXEP</span>
            <h6>Hansen Sales Group</h6>
            <p>
            Todd Hansen<br />
            3125 E Rock Wren Rd<br />
            Phoenix, AZ 85048<br />
            Email: Todd@Hansensales.com<br />
            Office: (480) 759-5959<br />
            Areas Served:<br />
            Southern NV, AZ, NM, El Paso TX
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">CAN,NVN</span>
            <h6>Mike Mays</h6>
            <p>
            4426 Spring Wood Dr.<br />
            Napa, CA 94558<br />
            Email: DorRep@SBCGlobal.net<br />
            Cell: (707) 293-4276<br />
            Areas Served:<br />
            Northern CA, Northern Nevada
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">CAS</span>
            <h6>Tarca & Associates</h6>
            <p>
            Mark Tarca<br />
            Email: MTarca@Tarcaassociates.com<br />
            Office: (888) 461-0008<br />
            Areas Served:<br />
            Southern California
            </p>
        </div>
    </div><!-- end of theReps -->
    <script type="text/javascript">
    (
      function( )
      {
          var form = document.getElementById("theForm");
          form.stateChoice.onchange = changeStates;
          var sels = form.regionChoice;
          for ( var s = 0; s < sels.length; ++s )
          {
              sels[s].onchange = function() { changeRegions(this.value); };
          }
          // turn off all rep displays 
          function clearReps( )
          {
              var divs = document.getElementById("theReps").getElementsByTagName("div");
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.display = "none";
              }
          }
          
          function changeStates( )
          {
              clearReps();
              // turn off all state displays
              var divs = document.getElementById("theStates").getElementsByTagName("div");
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.display = "none";
              }         
              var choice = this.value;
              // if this state has a separate regions selector, show it...
              if ( choice.charAt(0) == "*" )
              {
                  document.getElementById( choice.substring(1) ).style.display = "block";
                  return; // and do nothing more
              }
              // not a state that needs another choice, so directly show it as a region:
              changeRegions( choice );
          }
          function changeRegions( toRegion )
          {
              clearReps();              
              // convert the region we are looking for into a regular expression
              var lookfor = new RegExp( "\\b" + toRegion + "\\b", "i" );
    
              // check all divs...
              var divs = document.getElementById("theReps").getElementsByTagName("div");
              for ( var d = 0; d < divs.length; ++d )
              {
                  var div = divs[d];
                  // what regions are served by this rep?
                  var served = div.getElementsByTagName("span")[0].innerHTML;
                  if ( lookfor.test(served) )
                  {
                      // this rep serves the region requested
                      div.style.display = "block"; // so show it
                  }
              }
          }
    
      } // end of the master anonymous function
    )(); // so self-invoke it
    </script>
    </body>
    </html>
    This also show the *modern* way to use JavaScript: So-called "unobtrusive style".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    samuelito.mcf (01-25-2013)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Quote Originally Posted by felgall View Post
    I already posted a link to a page showing all the code necessary to do this in my first reply. If you had looked at that page then you would see how to get rid of the unnecessary repetitive code.
    And I've often used that kind of approach, myself. But in this case, since we *also* had to decide whether or not to even show the second <select>, I opted for a more simplistic approach. In total, it's roughly the same amount of code, just more HTML and less JS than the mostly-in-JS method.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Jan 2013
    Location
    Oregon
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    I already posted a link to a page showing all the code necessary to do this in my first reply. If you had looked at that page then you would see how to get rid of the unnecessary repetitive code.
    I did look at your link but seeing as my Javascript knowledge is 0 (which is self-evident) I did not know how to make that work for my situation specifically. Nonetheless, I appreciate your response.

  • #13
    New Coder
    Join Date
    Jan 2013
    Location
    Oregon
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I guess I knew I was going to regret saying that. <grin/>
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Sales Reps</title>
    <style type="text/css">
    .unrep { display : none; }
    .regions { display : none; }
    .states { display : none; }
    h6 { font-size: x-large; font-weight: bold; }
    </style>
    </head>
    <body>
    <form id="theForm">
    
    <select name="stateChoice">
    <option value = "">Select Your State or Region</option>
    <option value = "AZ">Arizona</option>
    <option value = "*CA">California</option>
    <option value = "CO">Colorado</option>
    <option value = "ID">Idaho</option>
    <option value = "MT">Montana</option>
    <option value = "*NV">Nevada</option>
    <option value = "NM">New Mexico</option>
    <option value = "OR">Oregon</option>
    <option value = "*TX">Texas</option>
    <option value = "UT">Utah</option>
    <option value = "WA">Washington</option>
    <option value = "WY">Wyoming</option>
    <option value = "Oth">Other</option>
    </select>
    <div id="theStates">
        <div class="states" id="CA">
            <select name="regionChoice">
                <option value="">Choose a region</option>
                <option value="CAN">Northern California</option>
                <option value="CAS">Southern California</option>
            </select>
        </div>
        <div class="states" id="NV">
            <select name="regionChoice">
                <option value="">Choose a region</option>
                <option value="NVN">Northern Nevada</option>
                <option value="NVS">Southern Nevada</option>
            </select>
        </div>
        <div class="states" id="TX">
            <select name="regionChoice">
                <option value="">Choose a region</option>
                <option value="TXEP">Texas, El Pason only</option>
                <option value="TX">Texas, other </option>
            </select>
        </div>
    </div>
    
    </form>
    
    <div id="theReps">
        <div class="unrep">
            <span class="regions">OR,WA,ID,MT,WY</span>
            <h6>Dave Fellows</h6>
            <p>
            101 W Prairie Shopping Ctr. PMB#352<br />
            Hayden, ID 83835<br />
            Email: DWFellows2@yahoo.com<br />
            Ph: (208) 691-5465<br />
            Fx: (208) 772-4025<br />
            Areas Served:<br />
            OR, WA, ID, MT, & WY
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">UT,CO,TX</span>
            <h6>Woman In Motion</h6>
            <p>
            McKenzi Maxwell<br />
            425 North Locust Ave.<br />
            Lindon, UT 84042<br />
            Email: Doors3068@aol.com<br />
            Office: (801) 785-9852<br />
            Areas Served:<br />
            Utah, Colorado, Texas (except El Paso)
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">NVS,AZ,NM,TXEP</span>
            <h6>Hansen Sales Group</h6>
            <p>
            Todd Hansen<br />
            3125 E Rock Wren Rd<br />
            Phoenix, AZ 85048<br />
            Email: Todd@Hansensales.com<br />
            Office: (480) 759-5959<br />
            Areas Served:<br />
            Southern NV, AZ, NM, El Paso TX
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">CAN,NVN</span>
            <h6>Mike Mays</h6>
            <p>
            4426 Spring Wood Dr.<br />
            Napa, CA 94558<br />
            Email: DorRep@SBCGlobal.net<br />
            Cell: (707) 293-4276<br />
            Areas Served:<br />
            Northern CA, Northern Nevada
            </p>
        </div>
    
        <div class="unrep">
            <span class="regions">CAS</span>
            <h6>Tarca & Associates</h6>
            <p>
            Mark Tarca<br />
            Email: MTarca@Tarcaassociates.com<br />
            Office: (888) 461-0008<br />
            Areas Served:<br />
            Southern California
            </p>
        </div>
    </div><!-- end of theReps -->
    <script type="text/javascript">
    (
      function( )
      {
          var form = document.getElementById("theForm");
          form.stateChoice.onchange = changeStates;
          var sels = form.regionChoice;
          for ( var s = 0; s < sels.length; ++s )
          {
              sels[s].onchange = function() { changeRegions(this.value); };
          }
          // turn off all rep displays 
          function clearReps( )
          {
              var divs = document.getElementById("theReps").getElementsByTagName("div");
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.display = "none";
              }
          }
          
          function changeStates( )
          {
              clearReps();
              // turn off all state displays
              var divs = document.getElementById("theStates").getElementsByTagName("div");
              for ( var d = 0; d < divs.length; ++d )
              {
                  divs[d].style.display = "none";
              }         
              var choice = this.value;
              // if this state has a separate regions selector, show it...
              if ( choice.charAt(0) == "*" )
              {
                  document.getElementById( choice.substring(1) ).style.display = "block";
                  return; // and do nothing more
              }
              // not a state that needs another choice, so directly show it as a region:
              changeRegions( choice );
          }
          function changeRegions( toRegion )
          {
              clearReps();              
              // convert the region we are looking for into a regular expression
              var lookfor = new RegExp( "\\b" + toRegion + "\\b", "i" );
    
              // check all divs...
              var divs = document.getElementById("theReps").getElementsByTagName("div");
              for ( var d = 0; d < divs.length; ++d )
              {
                  var div = divs[d];
                  // what regions are served by this rep?
                  var served = div.getElementsByTagName("span")[0].innerHTML;
                  if ( lookfor.test(served) )
                  {
                      // this rep serves the region requested
                      div.style.display = "block"; // so show it
                  }
              }
          }
    
      } // end of the master anonymous function
    )(); // so self-invoke it
    </script>
    </body>
    </html>
    This also show the *modern* way to use JavaScript: So-called "unobtrusive style".
    Thank you very much! I appreciate all of your time.

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by samuelito.mcf View Post
    I did look at your link but seeing as my Javascript knowledge is 0 (which is self-evident) I did not know how to make that work for my situation specifically. Nonetheless, I appreciate your response.
    Apart from defining the entries you wanted in the second list for each selection from the first in the array at the top of the script, the only other thing that would need changing in the script I posted to get exactly what you want would be to add two extra lines to show and hide the second dropdown. Getting everything to work apart from hiding the second select wouldn't even require a knowledge of JavaScript as it is fairly obvious by looking at both the script and the working example as to what value go where in the array to have them display just by trying out the example.

    If you want to use dynamic effects in your web page then you really ought to learn JavaScript as that is what all such effects are written using. Only if you are going to use effects where someone has already written the entire script for you can you avoid needing to know JavaScript in order to add effects to your page.

    Trying to add effects to your web page without first learning JavaScript is like trying to fly a plane without taking any flying lessons.
    Last edited by felgall; 01-25-2013 at 08:13 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •