实现下拉框二级联动

最新推荐文章于 2024-05-16 04:47:02 发布
最新推荐文章于 2024-05-16 04:47:02 发布
阅读量468 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onlyaisha/article/details/37775625
版权 
<%@ 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.csdn.net/xheditor/xheditor_emot/default/wail.gif" /></span>

onlyaisha
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java二级联动sql_jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
weixin_35253106的博客
02-13 938
本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法。分享给大家供大家参考，具体如下：项目告一段落，现在将遇到的比较实用的东西记录下来，写了多遍了，谨记于此，以备查看！1、首先在数据库中获取第一个下拉框的数据：listValue="tsFrom" cssStyle="width:90" list="tsfrom1"name="tsFrom" theme="simple" heade...
java web下开发二级级联下拉菜单（数据库实现的）
05-23
网上级联菜单确有不少，单大多是直接写死到jsp页面中的，本代码是用mysql的数据库实现的，希望对大家有帮助！！！
java js 二级联动下拉列表_JS实现下拉列表的二级联动
weixin_29374899的博客
02-13 743
这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，动态的联动需要检索数据库，这个对不需要更新的二级联动比较实用。这里使用了javascript来联动第二级下拉框。String path = request.getContextPath();String basePath = request.getScheme()+...
Ajax 技术学习（JavaEE）—— 实现二级下拉联动
最新发布
2401_84584854的博客
05-16 982
当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示，其中囊括了一、Ajax 实现下拉菜单。
Java编程题——简单下拉框二级联动
m的博客
12-19 3644
题目要求：用下拉框实现两级联动，第一个为省份，第二个为城市名 代码实现： import javax.swing.*; import java.awt.event.*; public class ItemTest extends JFrame implements ItemListener{ JComboBox province; //一级选项，存放省份 JComboBox city; //二级选项，存放城市名 public ItemTest(){ JLabel label
java联动_java实现的二级联动菜单效果
weixin_30635315的博客
02-12 499
本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考，具体如下：JSP代码：二级菜单联动演示var req;window.onload=function(){//页面加载时的函数}function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数var province = document.getElementById('province').value...
js实现下拉框二级联动
10-17
总而言之，通过上述内容的学习，我们可以了解到实现下拉框二级联动的基本思路和具体实现方法。在实际开发过程中，还可以进一步优化用户体验，例如添加动画效果、优化性能等，使得整个交互过程更加流畅和自然。
C# MVC 使用LayUI实现下拉框二级联动的功能
08-19
C# MVC 使用LayUI实现下拉框二级联动的功能 C# MVC 中使用 LayUI 实现下拉框二级联动的功能是指在 Web 应用程序中使用 LayUI 库来实现下拉框的二级联动功能，即根据选择的部门来动态加载对应的角色信息。下拉框二级...
js实现的下拉框二级联动效果
10-22
本文主要介绍了使用JavaScript实现下拉框二级联动效果的方法，该技术在网页交互设计中非常常见，能够提高用户的操作体验。下拉框二级联动指在一个下拉框中选择了某个选项后，第二个下拉框中的选项会根据第一个下拉框...
Ajax 技术学习（JavaEE）—— 实现二级下拉联动(1)
2401_84584831的博客
05-16 838
当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示，其中囊括了我们在购买快递选择收获地址的时候，选择地域一般都是现选择省，省选择完毕后，电脑会自动显示该省对应的城市，我们选择了城市之后，系统会显示该城市所对应的的区域。其实这就是通过 ajax 后台数据自动生成的，接下来我们就来实现一下我们这里使用 servlet 写死数据。
Ajax实现java web 中下拉列表二级联动
11-24
ajax 我们也就讲过一个小例子，这是后来经老师指点后用老师的例子改的，希望对想实现二级联动的同学有所帮助.
java js 二级联动下拉列表_二级联动下拉列表JS+html实现
weixin_35252187的博客
02-24 398
例子：This is a test!请选择脚本语言高级语言其他语言请选择//获取一级菜单长度var select1_len = document.frm.s1.options.length;var select2 = new Array(select1_len);//把一级菜单都设为数组for (i=0; i{ select2[i] = new Array();}//定义基本选项select2[0...
二级联动 下拉列表
简单的男孩
01-21 1122
二级联动 下拉列表 需先选择英雄,才能在选择英雄的皮肤 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级联动</title> </head> <body> <form action="#" method="post"> <!--先创建两个下拉列表--> 请选择英雄 :
简单二级联动菜单实现
JAVA - 再强的人也只不过是沧海一粟，虚心学习才是王道
10-30 2466
 上网查了好多，发现这个是最简单而且容易看懂的，留作备份，还有数据库和更难的联动，以后再研究 请选择 脚本语言 高级语言 其他语言  请选择//获取一级菜单长度var select1_len = document.frm.s1.options.length;var select2 = new Array(select1_len);//把一级菜单都设为数组for
JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）
热门推荐
xiaohai798的专栏
06-24 1万+
AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）
java 二级联动实现
ebonyzhang
12-06 1万+
ajax异步传值实现二级联动效果实例：
vue + elementUI 实现下拉框二级联动
07-22
你可以使用 Vue 和 Element UI 来实现下拉框的二级联动。下面是一个简单的示例： 首先，在你的 Vue 组件中引入相关的库和组件： ```javascript <template> <div> <el-select v-model="selectedProvince" @change="handleProvinceChange"> <el-option v-for="province in provinces" :key="province" :label="province" :value="province"></el-option> </el-select> <el-select v-model="selectedCity"> <el-option v-for="city in cities" :key="city" :label="city" :value="city"></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedProvince: '', selectedCity: '', provinces: ['省份1', '省份2', '省份3'], // 替换成你的省份数据 cities: { '省份1': ['城市1', '城市2', '城市3'], // 替换成你的城市数据 '省份2': ['城市4', '城市5', '城市6'], '省份3': ['城市7', '城市8', '城市9'] } }; }, methods: { handleProvinceChange() { this.selectedCity = ''; // 清空已选择的城市 } } }; </script> ``` 在上面的示例中，我们使用了两个 `el-select` 组件来展示省份和城市的下拉框。`provinces` 数组存储了所有的省份数据，`cities` 对象存储了每个省份对应的城市数据。当选择省份时，`handleProvinceChange` 方法会被调用，清空已选择的城市并更新城市下拉框的选项。 请注意，上述示例中的省份和城市数据都是静态的，你需要根据实际情况进行替换。你可以从后端或其他数据源中获取数据，并将其动态地传递给组件。 希望这个示例能帮助到你实现下拉框的二级联动！如有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值