472,805 Members | 1,795 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

How can I dynamically populate data when selecting an option from a dropdown list?

I have a JSP page and it contains a dropdown list called Office.

What I try to do is:

When I select different office from this list, the information of office
(address, phone,etc) will be populated in same JSP page.

I have a java bean called officeBean that contains all the office
information.

My question is how to use JavaScript to implement this function.

Any sample code is welcome.

Kevin
Jul 23 '05 #1
1 3539
jzhang29 wrote:
I have a JSP page and it contains a dropdown list called Office.

What I try to do is:

When I select different office from this list, the information of office (address, phone,etc) will be populated in same JSP page.

I have a java bean called officeBean that contains all the office
information.

My question is how to use JavaScript to implement this function.

Any sample code is welcome.

Kevin


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">

input, select {
font: 12px tahoma;
text-align: right;
padding: 2px;
border: 1px #000 solid;
}

</style>
<script type="text/javascript">

var offices =
{

'Shanghai' :
{
address: '223 Willow Way' ,
phone: '22-435-4857' ,
carpet: 'brown shag'
},

'Tokyo' :
{
address: '223-55 Ginza' ,
phone: '333-435-4857' ,
carpet: 'Karastan Blue'
},

'San Francisco' :
{
address: '511 Embarcadero' ,
phone: '415-786-4908' ,
carpet: 'red linoleum'
},

'London' :
{
address: '5 Charing Cross' ,
phone: '4-77-888-3847' ,
carpet: 'brown shag'
},

'Tikrit' :
{
address: '19 Rubble Street' ,
phone: 'n/a' ,
carpet: 'flying'
},

'default' :
{
address: '' ,
phone: '' ,
carpet: ''
}

}

function populate(obj)
{
var v = obj.options[obj.selectedIndex].value,
office = offices[v || 'default'],
bullet = ' ';
if (null != office)
{
for (data in office)
if (field = document.getElementById(data))
field.value = bullet + office[data];
}
}

</script>
</head>
<body>
<form>
<select name="office" onchange="return populate(this)">
<option value="">- pick -</option>
<option value=""></option>
<option value="Shanghai">Shanghai</option>
<option value="Tokyo">Tokyo</option>
<option value="San Francisco">San Francisco</option>
<option value="London">London</option>
<option value="Tikrit">Tikrit</option>
</select>___select an office...
<hr />
<input
type="text"
id="address"
name="address"
value=" " />__address<br />
<input
type="text"
id="phone"
name="phone"
value=" " />__phone<br />
<input
type="text"
id="carpet"
name="carpet"
value=" " />__carpet<br />
</form>
</body>
</html>

Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Lukelrc | last post by:
Hi, I have a dynamically created listbox. I'm trying to get one of the options selected according to a passed value. This is what i have: <select name="txtTheme" id="txtTheme"> ...
1
by: Rod Early | last post by:
I need to know when the select element's dropdown list is opened (as when the user clicks on the arrow or does ALT-downarrow from the keyboard). Similarly, I need to known when the dropdown list...
4
by: cjm | last post by:
I have two problems that I suspect will be bread-and-butter problems for the more experienced guys on here, but I'm not the greatest with js. NB: Code snippets at the bottom The first problem...
3
by: Dmitry Korolyov [MVP] | last post by:
Is that possible? In other words, I want a dropdown list (and other list-type controls) which appears in edit more of a templated column to be populated with data at the run time. An attempt to do so...
1
by: murphy | last post by:
Hello, I've run into a potentially wrong design decision on a project and want to find out if my intended change is the best fix. I have a page that displays historical time-series data using...
3
by: Advertis | last post by:
Is there a way to populate a dropdown in a GridView with the next x years? I am using a GridView to display data from a SQL table One of the fields is a Year. I want to have the dropdown list not...
4
by: assgar | last post by:
Hi I am stuck on a problem. I use 3 scripts(form, function and process). Development on win2003 server. Final server will be linux Apache,Mysql and PHP is being used. The form displays...
0
by: Kay O'Keeffe | last post by:
Hello, I have written my own custom control and I want one of its properties to display as a dropdown list when clicked, so the user can select from the list, it would be similar to the asp...
1
by: itgaurav198 | last post by:
Hi, I have an arraylist(al) in which I have some values. I want to populate these values in my dropdown list. I have used the following code <select name="select"> <%for(int...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.