精华内容
下载资源
问答
  • 用ajax实现的jsp二级联动下拉列表

    热门讨论 2008-12-24 11:36:03
    用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦
  • js+jsp下拉列表二级联动简单的

    热门讨论 2010-12-09 09:59:36
    这个是修改的一个js下拉列表二级联动!!希望大家学习,下了个居然不能用,比较气愤,所以就改了改,成功了。希望大家学习!其实也没什么就是获得下拉列表中的选中的值。然后比对赋值就行了!
  • js下拉列表二级联动

    万次阅读 多人点赞 2018-01-20 09:20:59
    学了JS也有一段时间了,今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动,就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表,第一列表是选择省份,...

     学了JS也有一段时间了,今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动,就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表,第一列表是选择省份,那么我选择某一个省份,那么另一个列表也会对应显示该省份的城市。

     

     如上图所示,我选择了河北省,那么对应的城市列表中就会出现相应的城市。代码如下:

    js:

    cities = new Object();
    cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
    cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区');
    
    function set_city(province, city)
    {
        var pv, cv;
        var i, ii;
    
        pv=province.value;
        cv=city.value;
    
        city.length=1;
    
        if(pv=='0') return;
        if(typeof(cities[pv])=='undefined') return;
    
        for(i=0; i<cities[pv].length; i++)
        {
           ii = i+1;
           city.options[ii] = new Option();
           city.options[ii].text = cities[pv][i];
           city.options[ii].value = cities[pv][i];
        }
    
    }

    jsp:

    <form name="form1" action="" method="get">
        <select name="province" onChange="set_city(this, this.form.city);">
        <option value="0">选择省</option>
        <option value="河北省">河北省</option>
        <option value="山西省">山西省</option>
        </select>
        <select   name="city" id="citys">
        <option value="0">选择城市</option>
        </select>
    </form>

     还有一个案例是关于商品分类的问题,这个多用于网上购物方面。

     

    1 整机
    	15 笔记本 
    	16 笔记本配件  
    	17 台式机 
    	18 服务器 
    	19 服务器配件  
    	20 工作站 
    	21 小型机 
    	22 移动PC 
    	23 平板电脑  
    	24 网络电脑 
    2 数码产品 	 
    	25 数据相机 
    	26 MP3
    	27 便携式DVD 
    	28 数码学习机 
    	29 数码摄像头 
    	30 数码相机伴侣 
    	31 MD播放器
    	32 滤镜镜头 
    	33 多媒体硬盘播放
    3 无线网 
    	34 无线上网卡 
    	35 无线网卡
    4 配件
    	36 CPU 
    	37 内存 
    	38 主板
    5 耗材
    	40 墨盒 
    	41 纸张 
    6 软件
    	42 操作系统 
    	43 办公软件 
    	44 杀毒软件
    7 语音视频
    	45 视频会议 
    	46 视频卡
    8 办公设备
    	47 投影机 
    	48 打印机 
    	49 扫描仪
    9 网络设备
    	50 交换机 
    	51 集线器
    10 机房布线
    	52 测试仪 
    	53 机房空调
    11 移动存储
    	54 闪存卡
    	55 移动硬盘
    12 通讯设备
    	56 手机 
    	57 电话机
    13 显示设备
    	58 液晶显示器 
    	59 CRT显示器
    14 其他
    	60 游戏机
    	61 电池
    	62 音响
    

    附上数据。

     

    HTML:

    <form name="frmProduct">
    ......<br>
    商品大类:
    <select name="sltParent" id="sltParent" onChange="ss()">
        <option value="0">--选择大类--</option>
        <option value="1">--整机--</option>
        <option value="2">--数码产品--</option>
        <option value="3">--无线网--</option>
        <option value="4">--配件--</option>
        <option value="5">--耗材--</option>
        <option value="6">--软件--</option>
        <option value="7">--语音视频--</option>
        <option value="8">--办公设备--</option>
        <option value="9">--网络设备--</option>
        <option value="10">--机房布线--</option>
        <option value="11">--移动存储--</option>
        <option value="12">--通讯设备--</option>
        <option value="13">--显示设备--</option>
        <option value="14">--其他--</option>
    </select>
    
    商品子类:
    <select name="sltSub" id="sltSub" onChange="ss2()">
    <option value="">--选择子类--</option>
    </select>
    <br>......
    <input type="button" onClick="showSele()" value="提交"/>
    </form>

    JS:

     

     

    <script type="text/javascript">
    //使用数组存储数据
    var agoods1=new Array('请选择','整机','数码产品','无线网','配件','耗材','软件','语音视频','办公设备','网络设备','机房布线','移动存储','通讯设备','显示设备','其他');
    var agoods2=new Array('--选择子类--','笔记本','笔记本配件','台式机','服务器','服务器配件','工作站','小型机','移动PC','平板电脑','网络电脑','数据相机','MP3','便携式DVD','数码学习机','数码摄像头','数码相机伴侣','MD播放器','滤镜镜头','多媒体硬盘播放','无线上网卡','无线网卡','CPU','内存','主板',' ','墨盒','纸张','操作系统', '办公软件','杀毒软件','视频会议','视频卡','投影机','打印机','扫描仪','交换机','集线器','测试仪','机房空调','闪存卡','移动硬盘','手机','电话机','液晶显示器','CRT显示器','游戏机','电池','音响');
    //声明一个arrayGoods对应,这个对象在new的时候指向一个数组,可通过arrayGoodsP['i']找到对应数组
    
    var arrayGoodsP=new Object();
    arrayGoodsP['1']=new Array('--选择子类--','15','16','17','18','19','20','21','22','23','24');
    arrayGoodsP['2']=new Array('--选择子类--','25','26','27','28','29','30','31','32','33');
    arrayGoodsP['3']=new Array('--选择子类--','34','35');
    arrayGoodsP['4']=new Array('--选择子类--','36','37','38');
    arrayGoodsP['5']=new Array('--选择子类--','40','41');
    arrayGoodsP['6']=new Array('--选择子类--','42','43','44');
    arrayGoodsP['7']=new Array('--选择子类--','45','46');
    arrayGoodsP['8']=new Array('--选择子类--','47','48','49');
    arrayGoodsP['9']=new Array('--选择子类--','50','51');
    arrayGoodsP['10']=new Array('--选择子类--','52','53');
    arrayGoodsP['11']=new Array('--选择子类--','54','55');
    arrayGoodsP['12']=new Array('--选择子类--','56','57');
    arrayGoodsP['13']=new Array('--选择子类--','58','59');
    arrayGoodsP['14']=new Array('--选择子类--','60','61','62');
    var result="";
     //该方法实现了商品大类与子类的联动
    	function ss()
    	{
    		
    		var sltp=document.getElementById("sltParent");
    		var slsb=document.getElementById("sltSub");
    		var sva=sltp.value;
    		slsb.options.length=1;
    		for(var i=0;i<arrayGoodsP[sva].length;i++)
    		{
    			
    			if(i==25)
    			{
    				continue;
    			}
    			if(i!=0)
    			{
    			 slsb.options[i]=new Option(agoods2[Number(arrayGoodsP[sva][i])-14],arrayGoodsP[sva][i]);
    			}
    			else
    			{
    			 slsb.options[i]=new Option(agoods2[0],'0');
    			}
    		}
    	}
    	function ss()
    	{
    		
    		var sltp=document.getElementById("sltParent");
    		var slsb=document.getElementById("sltSub");
    		var sva=sltp.value;
    		slsb.options.length=1;
    		for(var i=0;i<arrayGoodsP[sva].length;i++)
    		{
    			
    			if(i==25)
    			{
    				continue;
    			}
    			if(i!=0)
    			{
    			 slsb.options[i]=new Option(agoods2[Number(arrayGoodsP[sva][i])-14],arrayGoodsP[sva][i]);
    			}
    			else
    			{
    			 slsb.options[i]=new Option(agoods2[0],'0');
    			}
    		}
    	}
     //ss2()和showSele()方法实现提交时,显示对应选择的商品名称与编号
    
    
     function ss2()
    	{
    		var slsb2=document.getElementById("sltSub");
    		if(slsb2.value!="--选择子类--")
    		{
    			result=slsb2.value;
    		}
    	}
    	function showSele()
    	{
    		alert("您选择的商品为"+agoods2[Number(result)-14]+",商品的编号为"+result);	
    	}
    </script>function ss2()
    	{
    		var slsb2=document.getElementById("sltSub");
    		if(slsb2.value!="--选择子类--")
    		{
    			result=slsb2.value;
    		}
    	}
    	function showSele()
    	{
    		alert("您选择的商品为"+agoods2[Number(result)-14]+",商品的编号为"+result);	
    	}
    </script>


    其中new Option(agr,agr),第一个参数为text文本,第二参数为服务器返回的value值。比如 new Option("举例","0"),相对应的HTML

     

    就是<option value="0">举例</option>。
     

     

     

     

    展开全文
  • 今天做了个小例子,用来通过异步来实现一个二级菜单中的数据从数据库中获取并绑定,它将数据库中的数据查询出来后添加到map对象中,通过json包将其打为json字符串返回给前台。有不足的地方请建议(#^.^#) 用到的资源...

    今天做了个小例子,用来通过异步来实现一个二级菜单中的数据从数据库中获取并绑定,它将数据库中的数据查询出来后添加到map对象中,通过json包将其打为json字符串返回给前台。有不足的地方请建议(#^.^#)

    用到的资源有:

    • jquery-3.3.1.min.js
    • gson-2.2.4.jar
    • mysql-connector-java-8.0.11.jar

    因为用到了数据库,就先看一下这个例子的数据库吧,下面这是数据库转储后的代码

    SET FOREIGN_KEY_CHECKS=0;
    -- Table structure for first
    DROP TABLE IF EXISTS `first`;
    CREATE TABLE `first` (
      `Id` int(11) NOT NULL AUTO_INCREMENT,
      `text` varchar(20) NOT NULL,
      PRIMARY KEY (`Id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=gb2312;
    -- Records of first
    INSERT INTO `first` VALUES ('1', '玩具');
    INSERT INTO `first` VALUES ('2', '汽车');
    INSERT INTO `first` VALUES ('3', '建筑');
    INSERT INTO `first` VALUES ('4', '服饰');
    INSERT INTO `first` VALUES ('7', '文具');
    -- Table structure for second
    DROP TABLE IF EXISTS `second`;
    CREATE TABLE `second` (
      `Id` int(11) NOT NULL AUTO_INCREMENT,
      `text` varchar(20) NOT NULL,
      `firstId` int(11) NOT NULL,
      PRIMARY KEY (`Id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=gb2312;
    -- Records of second
    INSERT INTO `second` VALUES ('1', '小熊', '1');
    INSERT INTO `second` VALUES ('2', '变形金刚', '1');
    INSERT INTO `second` VALUES ('3', '奥迪', '2');
    INSERT INTO `second` VALUES ('4', '帽子', '4');
    INSERT INTO `second` VALUES ('5', '夹克', '4');
    INSERT INTO `second` VALUES ('6', '牛仔裤', '4');
    INSERT INTO `second` VALUES ('7', '钢笔', '7');
    INSERT INTO `second` VALUES ('8', '毛笔', '7');
    INSERT INTO `second` VALUES ('9', '圆珠笔', '7');
    INSERT INTO `second` VALUES ('10', '彩笔', '7');
    

    这是这个例子的页面代码.

    <body>
        <br> 一级分类:
        <select style="width: 100px" id="sel1">
            <option value="null">--请选择--</option>
        </select> 二级分类:
        <select style="width: 100px" id="sel2">
            <option value="null">--请选择--</option>
        </select>
    </body>

    这是javascript代码

    <script type="text/javascript">
    
        //只要DOM就绪就会执行,进行异步处理    
        $(document).ready(function(){
            //声明一个全局变量,保存执行异步后获取的map对象
            var FIRSTDATE = null;
    
            $.ajax({
                type: "GET",
                url:"SecondaryLinkageServlet3",
                dataType:"json",
                success: function (firstdata) {
                    //将获取的值赋值给全局变量,因为这个返回的对象要在一级菜单改变时使用,
                    //所以需要扩大他的范围
                    FIRSTDATE = firstdata;
                    //输出打印
                    console.log(firstdata);
                    var grade=$("#sel1");
                    for(var key in firstdata){
                        //输出打印
                        console.log("属性:" + key + "====================");
                        //根据key去取值,获得List对象
                        var list = firstdata[key];
                        //遍历这个List对象
                        for(var j = 0; j < list.length; j++){
                            var obj = list[j];
                            //一会在下面控制器代码中可以看的出来,保存map对象时,
                            //一级菜单保存的key值为0
                            //二级菜单保存为0_...
                            if(key=="0"){
                                console.log(obj);
                                //添加一级下拉菜单
                                grade.append("<option value="+obj.id+">"+obj.text+"</option>"); 
                            }else{
                                console.log(obj);
                            }
                        }
                    }
                },
                error: function (firstdata) {
                    console.log("失败")
                }
            });
    
            //一级菜单的改变事件
            $("#sel1").change(function(){
                var str = $("#sel1").val();
                $("#sel2").empty();
                $("#sel2").append("<option value='null'>--请选择--</option>");
                if(str != "null"){
                    //遍历全局变量
                    for(var key in FIRSTDATE){
                        var list = FIRSTDATE[key];
                        for(var j = 0; j < list.length; j++){
                            var obj = list[j];
                            //判断并填充值
                            if(key!="0" && key=="0_"+ str){
                                //输出打印
                                console.log(obj);
                                //添加二级下拉菜单
                                $("#sel2").append("<option value="+obj.id+">"+obj.text+"</option>"); 
                            }
                        }
                    }
                }
            });
        });
    
    </script>

    在上述代码中,ajax通过’‘url:”SecondaryLinkageServlet3”,向控制器servlet发送请求,并声明获取的数据类型为json。

    我们看一下控制器SecondaryLinkageServlet3.java的代码,在这里只贴doPost()方法中的代码,在这里,为了方便,没有做分层处理

    /*protected void doPost(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            Connection conn = null; 
            //解决中文字符集问题
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            Map<String, List> map=new HashMap<String, List>();
            List firstlist = new ArrayList();
            // 连接数据库
            conn = connbean.openConn();
            // 执行查询查询一级列表内容
            String firstsql = "SELECT * FROM first";
            try {
                PreparedStatement pstmt = conn.prepareStatement(firstsql);
                ResultSet rs = pstmt.executeQuery();
                while (rs.next()) {
                    First first = new First();
                    first.setId(rs.getInt("id"));
                    first.setText(rs.getString("text"));
                    firstlist.add(first);
                }
                map.put("0", firstlist);
                // 根据外键Id执行查询查询一级列表内容
                for(int i = 0; i < firstlist.size(); i++) {
                    First lirst = (First) firstlist.get(i);
                    int id = lirst.getId();
                    String secondsql = "SELECT * FROM second WHERE firstId = " + id;
                    PreparedStatement pstmtt = conn.prepareStatement(secondsql);
                    ResultSet rss = pstmtt.executeQuery();
                    List secondlist = new ArrayList();
                    while (rss.next()) {
                        Second second = new Second();
                        second.setId(rss.getInt("id"));
                        second.setText(rss.getString("text"));
                        secondlist.add(second);
                    }
                    map.put("0_"+id, secondlist);
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
            // 关闭数据库连接
            connbean.closeConn(rs, pstmt, conn);
            System.out.println(map.toString());
            // 输出返回
            PrintWriter out = response.getWriter();
            // 调用gson的方法将对象打为Json数据格式(字符串)
            Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
            String firstdata = gson.toJson(map);
            out.write(firstdata);// 这里括号中的参数是在页面中要获取的值,是同名的
        }
    */

    到此,这个例子的代码就贴完了,下面我们看一下页面获取值的结果
    这里写图片描述
    这里写图片描述
    这里写图片描述


    说点题外话,我这里用到了mysql连接的比较高版本的jar包,所有连接串有一点改动

    String url = "jdbc:mysql://localhost:3306/secondarylinkage?serverTimezone=GMT";
    // 连接驱动,在老的版本中这个驱动是com.mysql.jdbc.Driver
    Class.forName("com.mysql.cj.jdbc.Driver");
    // 连接数据库
    conn = DriverManager.getConnection(url, "root", "1");
    展开全文
  • AJAX的核心是JavaScript对象XMLHttpRequest。...本文就以二级联动下拉列表为例: 获取AJAX对象js代码: function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }cat...

    AJAX的核心是JavaScript对象XMLHttpRequest。是一种异步请求的技术,不用刷新整个页面就可以与服务器进行交互。本文就以二级联动下拉列表为例:

    获取AJAX对象js代码:

    function createAJAX(){
    	var ajax = null;
    	try{
    		ajax = new ActiveXObject("microsoft.xmlhttp");
    	}catch(e1){
    		try{
    			ajax = new XMLHttpRequest();
    		}catch(e2){
    			alert("浏览器不支持ajax");
    		}
    	}
    	return ajax;
    }

    JavaScript与jsp代码:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <html>
    <head>
    <title>二级联动下拉列表</title>
    <script type="text/javascript" src="js/ajax.js"></script>
    </head>
    
    <body>
    	<select id="provinceID" style="width:111px">
    		<option>--选择省份--</option>
    		<option>陕西</option>
    		<option>广东</option>
    	</select>    
    
    	<select id="cityID" style="width:111px">
    		<option>--选择城市--</option>
    	</select>
    
    	<script type="text/javascript">
    		document.getElementById("provinceID").onchange = function() {
    
    			//清空城市下拉列表,但是除去第一项
    			var cityElement = document.getElementById("cityID");
    			cityElement.options.length = 1;
    
    			var index = this.selectedIndex;
    			var optionElement = this[index];
    			var province = optionElement.innerHTML;
    
    			if ("选择省份" != province) {
    
    				//【1】获取ajax异步对象
    				var ajax = createAJAX();
    				var method = "POST";
    				var url = "${pageContext.request.contextPath}/ListBoxServlet?time = "+ new Date().getTime();
    
    				ajax.open(method, url);
    
    				//【2】设置请求头
    				ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
    
    				//【3】
    				var content = "province=" + province;
    				ajax.send(content);
    
    				//---------------------------------------
    				//【4】匿名函数
    				ajax.onreadystatechange = function() {
    					if (ajax.readyState == 4) {
    						if (ajax.status == 200) {
    							//【5】从响应中获取xml文档
    							var xmlDocument = ajax.responseXML;
    
    							//按照DOM规则,解析xml文档
    							var cityElementArray = xmlDocument.getElementsByTagName("city");
    							var size = cityElementArray.length;
    							for (var i = 0; i < size; i++) {
    								//获取城市标签中的城市名称
    								var city = cityElementArray[i].firstChild.nodeValue;
    								//创建标签,并对标签内容进行赋值
    								var optionElement = document.createElement("option");
    								optionElement.innerHTML = city;
    								cityElement.appendChild(optionElement);
    							}
    
    						}
    					}
    				}
    
    			}
    		}
    	</script>
    
    </body>
    </html>
    
    Servlet代码:

    package com.xpeng.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class ListBoxServlet extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		request.setCharacterEncoding("UTF-8");
    
    		String province = request.getParameter("province");
    
    		// 通知ajax异步对象,服务器响应的信息载体是xml文件
    		response.setContentType("text/xml;charset=UTF-8");
    
    		PrintWriter pw = response.getWriter();
    
    		pw.write("<?xml version='1.0' encoding='UTF-8'?>");
    		pw.write("<root>");
    
    		if ("广东".equals(province)) {
    			pw.write("<city>广州</city>");
    			pw.write("<city>深圳</city>");
    			pw.write("<city>珠海</city>");
    		} else if ("陕西".equals(province)) {
    			pw.write("<city>西安</city>");
    			pw.write("<city>汉中</city>");
    			pw.write("<city>宝鸡</city>");
    			pw.write("<city>安康</city>");
    		}
    		pw.write("</root>");
    		pw.flush();
    		pw.close();
    	}
    
    }
    

    访问页面:




    转载于:https://www.cnblogs.com/xpeng-V/p/7349674.html

    展开全文
  • //联动函数 function redirec(x) { var temp = document.frm.s2; for (i=0;i[x].length;i++) { temp.options[ i]=new Option(select2[x][i].text,select2[x][i].value);} temp.options[0].selected=true; } ```
  • 本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考。具体如下: 效果图:   具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb...
  • 二级联动下拉列表JS+html实现

    千次阅读 2015-06-19 14:32:58
    例子: This is a test! 请选择 脚本语言 ...//获取一菜单长度 var select1_len = document.frm.s1.options.length; var select2 = new Array(select1_len); //把一菜单都设为数组 for (i=0;
    例子:
    
    <html>
    <head>
    <title>This is a test!</title>
    </head>
    <body>
    <form name="frm">
    <select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
    <option selected>请选择</option>
    <option value="1">脚本语言</option>
    <option value="2">高级语言</option>
    <option value="3">其他语言</option>
    </select>

    <select name="s2">
    <option value="请选择" selected>请选择</option>
    </select>
    </form>
    <script language="javascript">
    //获取一级菜单长度
    var select1_len = document.frm.s1.options.length;
    var select2 = new Array(select1_len);
    //把一级菜单都设为数组
    for (i=0; i<select1_len; i++)
    { select2[i] = new Array();}
    //定义基本选项
    select2[0][0] = new Option("请选择", " ");

    select2[1][0] = new Option("PHP", " ");
    select2[1][1] = new Option("ASP", " ");
    select2[1][2] = new Option("JSP", " ");

    select2[2][0] = new Option("C/C++", " ");
    select2[2][1] = new Option("Java", " ");
    select2[2][2] = new Option("C#", " ");

    select2[3][0] = new Option("Perl", " ");
    select2[3][1] = new Option("Ruby", " ");
    select2[3][2] = new Option("Python", " ");
    //联动函数
    function redirec(x)
    {

    var temp = document.frm.s2;

    temp.length = 0;//清除s2内容 

    for (i=0;i<select2[x].length;i++)
    { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
    temp.options[0].selected=true;
    }
    </script>
    </body>
    </html>
    展开全文
  • 二级联动要实现数据库时实读取时,比较麻烦,本例子用Ajax可以简单实现 ajax+Jsp+js+servlet
  • 这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成JSP。下载包中包含一个org.json.jar,测试的时候,请将这个包加了应用服务器的lib目录中,原文地址:...
  • 9月8日,看到网站上有人在写用js来写二级菜单,可是都没有放在jsp中,所以本人就在jsp中写了一个例子,作为参考 ,同时对于下拉菜单,必须要知道下拉菜单的js基本操作。 JavaScript对下拉菜单的基本操作: 1.获取一...
  • 在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
  • 利用ajax实现二级联动下拉框

    千次阅读 2016-08-04 15:19:40
    下拉框二级联动,用ajax来实现是已经非常成熟的技术了。但对于我这个java菜鸟来说,真的是费了九牛二虎之力,各种百度,各种测试。终于得以实现。代码相对于网上的容易理解些。现把代码和我在编写的过程中遇到的问题...
  • jsp中的二级联动

    千次阅读 2019-01-18 18:32:20
    其他语言</option>//下拉列表数据 请选择" selected>请选择 //获取一菜单长度 var select1_len = document.frm.s1.options.length; var select2 = new Array(select1_len); //把一菜单都设为数组 for (i=...
  • JSP+AJAX实现两select联动 代码

    热门讨论 2009-11-05 20:33:44
    个人制作的一个select联动菜单,效果还不错,代码很简单,select内容均从mysql数据库中取出的!
  • 最近在做一个项目,要使用动态下拉二级联动效果。就是当改变新闻大类别后,相应的小类别也要调整。数据库我设置了三个字段(id,name,parentId),因为只做二层目录,所以第一层目录的父节点(parentId)都为-1,第二...
  • 网上级联菜单确有不少,单大多是直接写死到jsp页面中的,本代码是用mysql的数据库实现的,希望对大家有帮助!!!
  • Ajax制作二级联动下拉列表框 1.index.jsp 1 &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; 2 &lt;html&gt; 3 &lt;...
  • 联动下拉菜单 $(function(){ $("#wc").change(function(){ $.getJSON("t2.jsp",{index: $(this).val()}, function(myJSON){ var myOptions = ''; for (var i = 0; i < ...
  • Ajax 技术练习一、Ajax 实现下拉菜单1.1 场景再现1.2 技术分析1.2.1 前台分析1.2.2 后台分析、让我们来实现它2.1 使用 xml 传输数据2.2 使用 json 来传数据 一、Ajax 实现下拉菜单 1.1 场景再现 我们在购买快递...
  •  二级菜单联动演示    var req;  window.onload=function()  {//页面加载时的函数  }    function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数  var provinc
  • 首先要导入下面的包,缺一不可 然后写jsp*" pageEncoding="utf-8"%> //获取整个项目路径 String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.ge
  • 本文是要做一个二级联动,动态的。通过jquery返回json类型的数据,然后在jsp页面处理,生成第二级下拉列表菜单。 所需js库: jquery.js,json2.js jar包:json-lib-2.2.3-jdk15.jar,ezmorph-1.0.6.jar ...
  • jsp+json+mySql 实现二级级联下拉菜单

    热门讨论 2010-07-27 18:53:19
    数据是从mySql数据库中动态读取,运行sql文件即可,经测试是没问题的……
  • 第一步,在jsp页面添加隐藏的输入框,保存下拉选框选中的内容    收件人              

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 808
精华内容 323
关键字:

jsp二级联动下拉列表