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:

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.

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.

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?

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:
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:
With JS code as simple as something like this:
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.

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

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.

Yeah I think that's definitely better than what I have. How would I incorporate the multiple drop downs?

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 guess I knew I was going to regret saying that. <grin/>
This also show the *modern* way to use JavaScript: So-called "unobtrusive style".

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.

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.

Thank you very much! I appreciate all of your time.

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.