Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamic Dependant Dropdown Menus from Database using Javascript

Status
Not open for further replies.
rudy23

rudy23

Programmer
Feb 12, 2004
31
US
Hello Everybody

Saw some solutions but they didnt seem to fit what I needed.

Heres what I need to do.
1. User chooses STATE from Drop Down List
2. QUERY database: STRIP all cities associated with that STATE.
3. Create 2nd dropdown based on results.

I do not want to prepopulate these values when the page loads since the amount of data is just humongous.

Can this be done using Javascript without reloading the whole page?

Any help greatly appreciated.

Thanks
 
Sort by date Sort by votes
You have two choices -

first send every city from every state to the page when it is initally called(which you said you don't want 'cause it'd be huge)

second you can send the state name to the server and reload the page (which you also didn't like)

There is no other way to get the info from the db to the page...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
no

-unless-

You can stick a hidden iframe on your page to do the transactions (the iframe would have to be reloaded) and then pass the data back to the main frame.

-kaht

banghead.gif
 
Upvote 0 Downvote
Thanks for the input guys.

My Boss has specifically asked me not to use frames. I thought there surely must be some way to do this without reloading the Page.

Any other suggesstions guys?
 
Upvote 0 Downvote
Any very professional sites I've seen do something like this do call the server and reload the page.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
If you are using Microsoft and IIS you could used RemoteScripting. I does exactly what you want.
 
Upvote 0 Downvote
The iframe wouldn't be visible, and your boss wouldn't even know it's there. It just resides on your page hidden, and when it's reloaded you don't notice any visible difference. Your page will look just like a regular page with no frames. Of course, I don't wanna get you in trouble, so you might wanna run the idea by your boss first.

-kaht

banghead.gif
 
Upvote 0 Downvote
Cant take a Risk with the iframe.

However I found this script. Works just the way I wanted it to.

client.jsp
Code: 
/*************************/ 
<%@page contentType=&quot;text/html&quot;%> 
<html> 
<head> 
<script type=&quot;text/javascript&quot; src=&quot;scripts.jsp&quot;></script> 
</head> 
<body> 
<form action=&quot;submitAddClient.jsp&quot;> 
<div id=&quot;container&quot;></div> 
<input type=&quot;button&quot; onclick=&quot;insSelect();&quot; value=&quot;Add Dept&quot; /> 
<input type=&quot;submit&quot;> 

</form> 
</body> 
</html>
/*********************/
Here is scripts.jsp
/********************/
Code: 
var myDataArray = new Array( 
<% 
con = ConnectionManager.getConnection(); 
stmt=con.createStatement(); 
rs=stmt.executeQuery(&quot;SELECT dept_name FROM department &quot;); 

while( rs.next() ) 
{ 
data = rs.getString(1); 
out.println(&quot;\&quot;&quot; + data + &quot;\&quot;,&quot;); 
} 
out.println(&quot;\&quot;\&quot;&quot;); 
con.close(); 
%> 
); 

function insSelect() 
{ 
var containerElement= document.getElementById(&quot;container&quot;); 
var newSelectElement = document.createElement(&quot;select&quot;); 
newSelectElement.name=&quot;dept_name&quot;; //Problem Line 
for (i=0; i < (myDataArray.length - 1); i++) 
{ 

var newOptionElement = document.createElement(&quot;option&quot;); 
newOptionElement.setAttribute(&quot;value&quot;, myDataArray[i]); 
newOptionElement.innerHTML = myDataArray[i]; 

newSelectElement.appendChild(newOptionElement); 
} 

containerElement.appendChild(newSelectElement); 
}
/*************************/
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
833
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
688
TheLazyPig
TheLazyPig
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
417
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
412
Marclem
Marclem

Part and Inventory Search

Sponsor

Back
Top