By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,678 Members | 2,021 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,678 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.