470,636 Members | 1,447 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,636 developers. It's quick & easy.

making drop down visible upon selecting a state

Hi everyone,

I am new to javascript (and new to programming). I want to have to
drop down menus. One will ask use to select from one of the 50 states.
The second one will be ask user to select a county within that state,
but will completely invisible (and unpopulated) until user selects a
state. I've been looking for code to do this in JavaScript, but I
haven't found any.

Can anyone help me?

Many thanks,
Tony
Jul 23 '05 #1
13 3860
In article <ff**************************@posting.google.com >, Tony
<Th*********@yahoo.com> wrote:
Hi everyone,

I am new to javascript (and new to programming). I want to have to
drop down menus. One will ask use to select from one of the 50 states.
The second one will be ask user to select a county within that state,
but will completely invisible (and unpopulated) until user selects a
state. I've been looking for code to do this in JavaScript, but I
haven't found any.

Can anyone help me?

Many thanks,
Tony

This page seems to have what you want:
http://www.mattkruse.com/javascript/dynamicoptionlist/

--
Dennis M. Marks
http://www.dcs-chico.com/~denmarks/
Replace domain.invalid with dcsi.net
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 23 '05 #2
On Sat, 24 Apr 2004 08:06:45 -0700, Dennis M. Marks
<de******@domain.invalid> wrote:

[snip]
This page seems to have what you want:
http://www.mattkruse.com/javascript/dynamicoptionlist/


It's interesting that the "Show source" links shows, "your browser sucks",
with Opera. The writeSource() function doesn't even attempt to use the
DOM-compliant HTMLScriptElement.text property to retrieve the SCRIPT
element's contents. Furthermore, it uses innerText exclusively[1], which
is hardly well supported. It would appear that the author's idea of a
"good" browser is Internet Explorer. Worrying.

Mike
[1] It's hardly important functionality, but sloppy nevertheless.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #3
In article <op**************@news-text.blueyonder.co.uk>, Michael
Winter <M.******@blueyonder.co.invalid> wrote:
On Sat, 24 Apr 2004 08:06:45 -0700, Dennis M. Marks
<de******@domain.invalid> wrote:

[snip]
This page seems to have what you want:
http://www.mattkruse.com/javascript/dynamicoptionlist/


It's interesting that the "Show source" links shows, "your browser sucks",
with Opera. The writeSource() function doesn't even attempt to use the
DOM-compliant HTMLScriptElement.text property to retrieve the SCRIPT
element's contents. Furthermore, it uses innerText exclusively[1], which
is hardly well supported. It would appear that the author's idea of a
"good" browser is Internet Explorer. Worrying.

Mike
[1] It's hardly important functionality, but sloppy nevertheless.


Just happens to be the first thing I saw in Google. There are many
more. Look for "dynamic select option".

--
Dennis Marks
http://www.dcs-chico.com/~denmarks/
To reply change none to dcsi.
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----
Jul 23 '05 #4
"Michael Winter" <M.******@blueyonder.co.invalid> wrote:
This page seems to have what you want:
http://www.mattkruse.com/javascript/dynamicoptionlist/

It's interesting that the "Show source" links shows, "your browser sucks",
with Opera. The writeSource() function doesn't even attempt to use the
DOM-compliant HTMLScriptElement.text property to retrieve the SCRIPT
element's contents. Furthermore, it uses innerText exclusively[1], which
is hardly well supported. It would appear that the author's idea of a
"good" browser is Internet Explorer. Worrying.


Since it's my site, I thought I'd respond ;)

I wrote that "show source" stuff a while ago and it worked just fine on
every current browser I could find - except Opera. At the time, I wasn't
aware of HTMLScriptElement and couldn't come up with a solution that worked
in Opera also, so I stuck in the brief bit about a sucky browser because I'm
not a big fan of Opera to begin with ;) [I actually use and prefer Firefox].

I haven't had much of a chance to go back and re-write the code to use a
DOM-standard way of doing it, testing it in multiple browsers, and writing
code to fallback to other methods if the new methods don't work correctly.
If you'd like to write a replacement function which works on a wider range
of browsers, I'll certainly implement it immediatel!

--
Matt Kruse
Javascript Toolbox: http://www.mattkruse.com/javascript/

Jul 23 '05 #5
On Sun, 25 Apr 2004 16:33:39 -0500, Matt Kruse <ne********@mattkruse.com>
wrote:
"Michael Winter" <M.******@blueyonder.co.invalid> wrote:
On Sat, 24 Apr 2004 08:06:45 -0700, Dennis M. Marks
<de******@domain.invalid> wrote:
This page seems to have what you want:
http://www.mattkruse.com/javascript/dynamicoptionlist/
It's interesting that the "Show source" links shows, "your browser
sucks", with Opera. The writeSource() function doesn't even attempt to
use the DOM-compliant HTMLScriptElement.text property to retrieve the
SCRIPT element's contents. Furthermore, it uses innerText
exclusively[1], which is hardly well supported. It would appear that
the author's idea of a "good" browser is Internet Explorer. Worrying.


Since it's my site, I thought I'd respond ;)


I didn't aim it directly at you as I couldn't be sure if you did write it.
Some of your scripts are adapted (with permission) from the work of others.
I wrote that "show source" stuff a while ago and it worked just fine on
every current browser I could find - except Opera. At the time, I wasn't
aware of HTMLScriptElement and couldn't come up with a solution that
worked in Opera also, so I stuck in the brief bit about a sucky browser
because I'm not a big fan of Opera to begin with ;)
[I actually use and prefer Firefox].
I like Opera a lot. It has a good range of features from both the
Microsoft and Netscape worlds of browser scripting. There are a few minor
visual problems (they're very rare), and I do wish that the styleSheets
collection was supported, but it is an excellent browser. If v1.5 doesn't
fix those issues, I'll report them.
I haven't had much of a chance to go back and re-write the code to use a
DOM-standard way of doing it, testing it in multiple browsers, and
writing code to fallback to other methods if the new methods don't work
correctly. If you'd like to write a replacement function which works on
a wider range of browsers, I'll certainly implement it immediatel!


To be honest, I wouldn't bother. As the code you display isn't likely to
change, I'd just put it in a text file or let the user view the source.
However, I might use this if I were pushed:

if( !document.getElementsById ) {
if( document.all ) {
document.getElementsById = function( id ) {
return document.all[ id ];
};
} else {
document.getElementsById = function() {
return null;
};
}
}
if( !document.getElementsByTagName ) {
if( document.all && document.all.tags ) {
document.getElementsByTagName = function( name ) {
return document.all.tags( name );
};
} else {
document.getElementsByTagName = function() {
return [];
};
}
}

function toggleSource( l, i ) {
var p = document.getElementById( 'pre[' + i + ']' ), h,
s, t;

if( p && ( s = p.style )) {
h = ( 'block' == s.display );

s.display = h ? '' : 'block';
t = h ? 'Show source' : 'Hide source';

if( l.firstChild && l.firstChild.data ) {
l.firstChild.data = t;
} else if( l.innerHTML ) {
l.innerHTML = t;
}
}
}

function writeSource( i ) {
var c = document.getElementsByTagName( 'SCRIPT' );

if( c.length > i ) {
var s = c[ i ], t = null;

if(( 'undefined' != typeof s.text ) && ( s.text.length > 0 )) {
t = s.text;
} else if(( 'undefined' != typeof s.innerHTML ) &&
( s.text.length > 0 ))
{
t = s.innerHTML;
}
if( t ) {
t = t.replace( /\</g, '&lt;' );
t = t.replace( /\>/g, '&gt;' );
document.write( '<a class="src" href="" onclick=' +
'"toggleSource(this,' + i + ');return false">Show source' +
'<\/a><pre id="pre[' + i + ']" class="src">' + t +
'<\/pre>' );
}
}
}

You'll have to add styling to the links and pre. The rules would be
something like

a.src {
color: #1aa8dc;
font-size: 75%;
text-decoration: none;
}

pre.src {
background-color: #eeeeee;
color: #000000;
display: none;
}

Also notice the difference in arguments to writeSource() between your
version and mine. As you shouldn't use id attributes with SCRIPTs (it's
invalid HTML and some strict browsers might reject it), I resorted to
using getElementsByTagName(), so you'd use indicies with the version
above. A little more awkward to maintain, but will support the same
browsers you did before, plus some new ones.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #6
Michael Winter wrote:
<clip>

if( p && ( s = p.style )) {
h = ( 'block' == s.display );

s.display = h ? '' : 'block';
t = h ? 'Show source' : 'Hide source';


s.display = h ? 'none' : 'block';

Mick
Jul 23 '05 #7
On Mon, 26 Apr 2004 19:03:56 GMT, Mick White <mw******@rochester.rr.com>
wrote:
Michael Winter wrote:
<clip>

if( p && ( s = p.style )) {
h = ( 'block' == s.display );

s.display = h ? '' : 'block';
t = h ? 'Show source' : 'Hide source';


s.display = h ? 'none' : 'block';


What I wrote was intentional. Does it cause problems for you as it is?

Using an empty string restores the default value. As the style sheet
associated with the PRE element specifies "display: none", "none" is the
value used. In this case it doesn't particularly matter, but it can in
some cases. These are notably when newer values, like table-row, are used
which some older browsers might substitute for simpler, but inaccurate,
values.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #8
Michael Winter wrote:

if( !document.getElementsById ) {
I'm pretty sure document.getElementsById doesn't exist in any browser:-)
if( !document.getElementsByTagName ) {
if( document.all && document.all.tags ) {
document.getElementsByTagName = function( name ) {
return document.all.tags( name );
};
} else {
document.getElementsByTagName = function() {
return [];
};
}
}
If you want to fully emulate document.getElementsByTagName, then you
need to take into account the "star" argument, otherwise the programmer
needs to know the implementation of your emulation before to use it...
function toggleSource( l, i ) {


It reminds me when I was learning PHP; as an exercise I built a
view-source script, which would show any js source fully colored, like
in a regular editor - a gorgeous result:-)
Cheers,
Yep.
Jul 23 '05 #9
On Mon, 26 Apr 2004 22:52:10 +0200, Yann-Erwan Perio
<y-*******@em-lyon.com> wrote:
Michael Winter wrote:
if( !document.getElementsById ) {


I'm pretty sure document.getElementsById doesn't exist in any browser:-)


Oops. I copied the gEBTN emulation and modified it, but forgot about the
's'.
if( !document.getElementsByTagName ) {
if( document.all && document.all.tags ) {
document.getElementsByTagName = function( name ) {
return document.all.tags( name );
};
} else {
document.getElementsByTagName = function() {
return [];
};
}
}


If you want to fully emulate document.getElementsByTagName, then you
need to take into account the "star" argument, otherwise the programmer
needs to know the implementation of your emulation before to use it...


....and I forgot about that feature. It'll be awkward to emulate though as
the document.all collection returns more than just HTML elements and can
also return invalid mark-up.

The former would be relatively simple to solve with Node.nodeType, but
early browser - the point of the emulation - won't support that. Any
ideas? For now, I suppose the branch in question should be changed to

if( document.all && document.all.tags && ( '*' != name )) {

I suppose the latter can be ignored once it's noted that documents should
be valid[1].
function toggleSource( l, i ) {


It reminds me when I was learning PHP; as an exercise I built a
view-source script, which would show any js source fully colored, like
in a regular editor - a gorgeous result:-)


Interesting, but a bit much. :)

Mike
[1] It's worrying that stating the need for valid documents is even
necessary...

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #10
Michael Winter wrote:

[getElementsByTagName("*")]
...and I forgot about that feature. It'll be awkward to emulate though
as the document.all collection returns more than just HTML elements and
can also return invalid mark-up.
Ah, you mean when it encounters invalid or unknown markup, or markup for
another namespace? But on the other hand can you guarantee that
getElementsByTagName("*") will behave consistently across user agents
when encountering such situations?
I suppose the latter can be ignored once it's noted that documents
should be valid[1].


At some point you have to make assumptions, and a correct HTML structure
is something that is manageable, whereas supported DOM features can
never be expected.

Anyway in the gEBTN example the error shouldn't be caught at a component
level, but at a higher level IMHO.
Cheers,
Yep.

Jul 23 '05 #11
On Tue, 27 Apr 2004 00:46:29 +0200, Yann-Erwan Perio
<y-*******@em-lyon.com> wrote:
Michael Winter wrote:

[getElementsByTagName("*")]
...and I forgot about that feature. It'll be awkward to emulate though
as the document.all collection returns more than just HTML elements and
can also return invalid mark-up.
Ah, you mean when it encounters invalid or unknown markup, [...]


We'll hope that authors will use valid mark-up.
or markup for another namespace?
I assume you're referring to namespaces in XML? I have no experience with
XML. From what I read briefly in DOM 2 Core regarding XML namespaces notes
that applications aware of namespaces should use the *NS methods. However,
I would guess that either elements from all namespaces would be returned,
or only elements from a particular namespace. Without reading more, I
couldn't say which.

What I was remarking on primarily was that comments are returned in IE6,
though text nodes aren't (I can't test older versions). Other node types
might be too, and all of these would have to be filtered out.
But on the other hand can you guarantee that getElementsByTagName("*")
will behave consistently across user agents when encountering such
situations?
Even if we include invalid mark-up, it would depend on how the browser
normalises it. The DOM doesn't appear to specify error correction (much
like the HTML Spec.), so that would browser-dependent.
I suppose the latter can be ignored once it's noted that documents
should be valid[1].


At some point you have to make assumptions, and a correct HTML structure
is something that is manageable, whereas supported DOM features can
never be expected.


Absolutely.
Anyway in the gEBTN example the error shouldn't be caught at a component
level, but at a higher level IMHO.


I would have thought it better to produce results that replicate the
standards as close as possible, or are you referring to something else?

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #12
Michael Winter wrote:
On Mon, 26 Apr 2004 19:03:56 GMT, Mick White <mw******@rochester.rr.com>
wrote:
Michael Winter wrote:
<clip>

if( p && ( s = p.style )) {
h = ( 'block' == s.display );

s.display = h ? '' : 'block';
t = h ? 'Show source' : 'Hide source';


s.display = h ? 'none' : 'block';

What I wrote was intentional. Does it cause problems for you as it is?

Using an empty string restores the default value. As the style sheet
associated with the PRE element specifies "display: none", "none" is the
value used. In this case it doesn't particularly matter, but it can in
some cases. These are notably when newer values, like table-row, are
used which some older browsers might substitute for simpler, but
inaccurate, values.

Mike


I would be inclined to hard wire "none" into the code, perhaps
unnecesarily. It may help the script to be more "readable"
JMTC
Mick
Jul 23 '05 #13
Michael Winter wrote:
What I was remarking on primarily was that comments are returned in IE6,
though text nodes aren't (I can't test older versions). Other node types
might be too, and all of these would have to be filtered out.
I didn't know that, thanks for the info; IE6 includes doctypes, comments
and processing instructions into the document.all collection; however,
the nodeName always returns "#comments". IE5.5 and IE5.0 behave the same
way, but return "!" instead of "#comments".
I would have thought it better to produce results that replicate the
standards as close as possible, or are you referring to something else?


Originally I had in mind unexpected results based on invalid HTML, and
thought that the emulation shouldn't try to normalize the result, but
should leave the error handling (if any) to the upper component.

I wasn't aware of document.all returning other nodes than element nodes,
shame on me:-), so yes I agree that the emulation should include some
filtering.

On a side note, getElementsByTagName being supported doesn't mean
getElementsByTagName("*") is supported, as IE5.5 proudly demonstrates.
Therefore the emulation should wrap the method calls and start with the
document.all branch.
Cheers,
Yep.
Jul 23 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Yoshitha | last post: by
3 posts views Thread by Novice Computer User | last post: by
2 posts views Thread by Antonio | last post: by
4 posts views Thread by TycoonUK | last post: by
1 post views Thread by swathin2 | last post: by
1 post views Thread by Korara | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.