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>
