Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page Getting Drop downs to "reset"

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-23-2013, 09:55 PM   PM User | #1
samuelito.mcf
New Coder

 
Join Date: Jan 2013
Location: Oregon
Posts: 34
Thanks: 5
Thanked 0 Times in 0 Posts
samuelito.mcf is an unknown quantity at this point
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>
samuelito.mcf is offline   Reply With Quote
Old 01-24-2013, 01:16 AM   PM User | #2
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,451
Thanks: 0
Thanked 496 Times in 488 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
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/
felgall is online now   Reply With Quote
Old 01-24-2013, 12:41 PM   PM User | #3
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,035
Thanks: 197
Thanked 2,410 Times in 2,388 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
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.
__________________

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.
Last edited by Philip M; 01-24-2013 at 01:01 PM..
Philip M is online now   Reply With Quote
Old 01-24-2013, 10:12 PM   PM User | #4
samuelito.mcf
New Coder

 
Join Date: Jan 2013
Location: Oregon
Posts: 34
Thanks: 5
Thanked 0 Times in 0 Posts
samuelito.mcf is an unknown quantity at this point
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?
samuelito.mcf is offline   Reply With Quote
Old 01-24-2013, 11:39 PM   PM User | #5
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,188
Thanks: 59
Thanked 3,995 Times in 3,964 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Users who have thanked Old Pedant for this post:
samuelito.mcf (01-24-2013)
Old 01-24-2013, 11:47 PM   PM User | #6
samuelito.mcf
New Coder

 
Join Date: Jan 2013
Location: Oregon
Posts: 34
Thanks: 5
Thanked 0 Times in 0 Posts
samuelito.mcf is an unknown quantity at this point
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
samuelito.mcf is offline   Reply With Quote
Old 01-24-2013, 11:57 PM   PM User | #7
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,188
Thanks: 59
Thanked 3,995 Times in 3,964 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Old 01-25-2013, 12:00 AM   PM User | #8
samuelito.mcf
New Coder

 
Join Date: Jan 2013
Location: Oregon
Posts: 34
Thanks: 5
Thanked 0 Times in 0 Posts
samuelito.mcf is an unknown quantity at this point
Yeah I think that's definitely better than what I have. How would I incorporate the multiple drop downs?
samuelito.mcf is offline   Reply With Quote
Old 01-25-2013, 01:05 AM   PM User | #9
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,451
Thanks: 0
Thanked 496 Times in 488 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
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/
felgall is online now   Reply With Quote
Old 01-25-2013, 01:05 AM   PM User | #10
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,188
Thanks: 59
Thanked 3,995 Times in 3,964 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Users who have thanked Old Pedant for this post:
samuelito.mcf (01-25-2013)
Old 01-25-2013, 01:08 AM   PM User | #11
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,188
Thanks: 59
Thanked 3,995 Times in 3,964 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Old 01-25-2013, 05:49 PM   PM User | #12
samuelito.mcf
New Coder

 
Join Date: Jan 2013
Location: Oregon
Posts: 34
Thanks: 5
Thanked 0 Times in 0 Posts
samuelito.mcf is an unknown quantity at this point
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.
samuelito.mcf is offline   Reply With Quote
Old 01-25-2013, 05:50 PM   PM User | #13
samuelito.mcf
New Coder

 
Join Date: Jan 2013
Location: Oregon
Posts: 34
Thanks: 5
Thanked 0 Times in 0 Posts
samuelito.mcf is an unknown quantity at this point
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.
samuelito.mcf is offline   Reply With Quote
Old 01-25-2013, 08:10 PM   PM User | #14
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,451
Thanks: 0
Thanked 496 Times in 488 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
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.
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
Last edited by felgall; 01-25-2013 at 08:13 PM..
felgall is online now   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 08:13 AM.
Advertisement
Log in to turn off these ads.