下拉框点击事件&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>&nbsp;
<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>

===完===

评论

3 楼 少女杀手 2009-07-17  

<% %>我看到这个就头疼！

为什么不用JSTL或者Sturts标签呢？

2 楼 zhangzi 2009-06-02  

用Ajax的dwr框架可以实现无刷新显示。

1 楼 hintcnuie 2008-05-08  

用jQuery，会简单些吧