下拉框点击事件&JS操作

前几天遇到一个问题：当你点击一个选择下拉框内容时，另一个地方显示这个内容的详细介绍
例如： 点击“北京” 在一个文本框里显示北京的详细介绍信息
“上海” 在一个文本框里显示上海的详细介绍信息
我采用的是JavaScript 辅助实现：
下拉框点击事件及JS操作
点击下拉菜单选项内容 显示相应的内容消息在另一个地方展现
－－－－－－－－－－－－－－－－－－－－－－－－－－－
方法1用javaScript＋onChange()事件 操作实现
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<%@ page import="com.eline.epicc.insurance.*"%>
<%@ page import="com.eline.epicc.insurance.model.*"%>
<%@ page import="java.util.*"%>
<%
ArrayList list = new ArrayList();
list = Insurances.GetInsuranceTypeInfos();
%>
<script>
function fnChange(){

var oCar=document.frm.oCars.options[document.frm.oCars.selectedIndex].text; //得到select name="oCars"的文本
var index=document.frm.oCars.options[document.frm.oCars.selectedIndex];//当前所选择的那一项
//alert(document.frm.oCars.options[document.frm.oCars.selectedIndex]);
//document.frm.oData.value+=oCar + "\n";
var len=document.getElementById("Cont").options.length; //得到隐藏的select 的长度
for(var i=0;i<=len;i++)
{
if(index.value==document.getElementById("Cont").options[i].value)
document.getElementById("conID").value=document.getElementById ("Cont").options[i].text;
}
}
</script>
<form name="frm" action="" method="post">
<%String option="北京是中国的首都"; %>
<select name="oCars" id="typeID" onChange="fnChange()">
<%
for(int i=0;i<list.size();i++){
InsuranceTypeObj obj = (InsuranceTypeObj)list.get(i);
%>
<option value="<%=obj.getIn_ID()%>"><%=obj.getIn_Genre() %></option>
<%} %>
</select>
<select name="cty" id="Cont" style="display:none">
<%
for(int i=0;i<list.size();i++){
InsuranceTypeObj obj = (InsuranceTypeObj)list.get(i);
%>
<option value="<%=obj.getIn_ID()%>"><%=obj.getIn_Explain()%></option>
<%} %>
</select>
<input type=text id="conID" name="Content" value="北京是中国的首都" readonly>
</form>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
方法2用简单一点的方法 操作实现

<tr height="25">
<td>请选择：</td>
<td>
<select name="in_TypeID" id="in_TypeID" onchange="javaScript:document.all.item('ts').innerHTML=this.options[this.selectedIndex].show;">

<%
for(int i=0;i<list.size();i++){
InsuranceTypeObj obj = (InsuranceTypeObj)list.get(i);
%>
<option value="<%=obj.getIn_ID()%>" show="<%=obj.getIn_Explain() %>"><%=obj.getIn_Genre() %></option>
<%} %>
</select><br> 
<span name="ts" id="ts">北京是中国的首都</span>
</td>
</tr>

-----------------------------------------------------
方法3

%>
<script type="text/javascript">
function myshow(){
var ts=document.frm.Content;
ts.value=document.frm.oCars.options[document.frm.oCars.selectedIndex].show;

}
</script>
<form name="frm" action="" method="post">
<table>
<tr>
<td>
<select name="oCars" id="typeID" onchange="myshow();">
<%
for(int i=0;i<list.size();i++){
InsuranceTypeObj obj = (InsuranceTypeObj)list.get(i);
%>
<option value="<%=obj.getIn_ID()%>" show="<%=obj.getIn_Explain() %>"><%=obj.getIn_Genre() %></option>
<%} %>
</select>
<input type="text" id="Content" name="Content" value="北京是中国的首都">
</td>
</tr>
</table>
</form>

===完===