实现下拉框二级联动

最新推荐文章于 2024-11-11 22:46:00 发布

原创最新推荐文章于 2024-11-11 22:46:00 发布 · 523 阅读

CC 4.0 BY-SA版权

本文介绍了一个基于Web技术实现的新闻栏目选择与动态加载系统，通过使用Java和相关框架，实现了用户根据栏目ID选择新闻内容，并通过AJAX技术实现实时更新和加载。系统包括数据库连接、SQL查询、数据解析与页面动态生成等功能。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*"%>
<%@ page import="javax.naming.*" %>
<%@ page import="java.util.*" %>
<%@ page import="com.jss.news.NewsBean" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<script language="javascript" type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">


$(function(){
	   $("#COLUMNID1").change(function(){
		   
		   var COLUMNID1=$("#COLUMNID1").val();
	        alert(COLUMNID1);
		   $.ajax({
   		 url:"TwoCol",//将参数传递到servlet
   		 type:"POST",
   		 data:{
   			"COLUMNID1":COLUMNID1, 		
   		 },
   	 success:function(data){
   		 var arr=new Array();
   		 arr=data.split("|");
   		 $("#COLUMNID2>option:first").nextAll().remove();//删除除了第一个元素外的所有子元素
   		 for(var i=0;i<arr.length;i++)
   			 {
   			 $("#COLUMNID2").append("<option>"+arr[i]+"</option>");
   			 
   			 }
   	  
   	 },
   	 error:function(){
   		 alert("请求失败");
   	 } 
   	 });  		     		     		   
	   });
})
  
    		 
    	 
</script>
</head>
<body>
           <select name="COLUMNID1" id="COLUMNID1"> 
                               <option selected="selected">请选择</option>
     <%try{ 
        Context cxt=new InitialContext();
		DataSource ds = (DataSource)cxt.lookup("java:/comp/env/jdbc/mysql");
		Connection conn=ds.getConnection();
		 
        String sql="select TITLE,COLUMNID from YW_News_Column where FATHERID=0";
        PreparedStatement ps=conn.prepareStatement(sql);
        ResultSet rs=ps.executeQuery();
        
        while(rs.next())
        {%>
          <option value="<%=rs.getInt("COLUMNID")%>"><%=rs.getString("TITLE") %></option>  
         
        <%
        }
        
        rs.close();
        ps.close();
        conn.close();
        }
       catch(Exception e){
   	   e.printStackTrace();
       } %>                                                                                                                               
                        </select>
                        
                        
                        
             <select name="COLUMNID2" id="COLUMNID2"> 
             <option selected="selected">--请选择--</option>
           </select>
           
</body>
</html>

<span style="color:#FF0000;">$(function(){}得放在最前面，否则就无法触发事件<img alt="大哭" src="http://static.blog.youkuaiyun.com/xheditor/xheditor_emot/default/wail.gif" /></span>