精华内容
下载资源
问答
  • -- 下拉菜单(List(Map)) --><%Map list_map = new HashMap();list_map.put("cityid","1");list_map.put("cityname","北京");list_map.put("2",&...
    <!-- 下拉菜单(List(Map)) -->
    <%
    Map list_map = new HashMap();
    list_map.put("cityid","1");
    list_map.put("cityname","北京");
    list_map.put("2","首都");

    Map list_map2 = new HashMap();
    list_map2.put("cityid","2");
    list_map2.put("cityname","上海");
    list_map2.put("2","直辖市");

    Map list_map3 = new HashMap();
    list_map3.put("cityid","3");
    list_map3.put("cityname","福州");
    list_map3.put("2","省会城市");

    List cityList3 = new ArrayList();
    cityList3.add(list_map);
    cityList3.add(list_map2);
    cityList3.add(list_map3);
    request.setAttribute("cityList3",cityList3);
    %>
    <s:select
    list="#request.cityList3"
    name="city3"
    label="List<Map>"
    listKey="cityid"
    listValue="cityname"
    headerKey="-1"
    headerValue="==请选择=="
    />
    展开全文
  • jquery获得单选框和下拉框的值,java日期处理,遍历list,遍历map
  • 一、前端遍历list显示select下拉框 后台代码: @GetMapping("/addPets/{id}") public String addPets(@PathVariable("id") Long id, ModelMap mmap) { Users users = usersService.selectUsersById(id); ...

    一、前端遍历list显示select下拉框

    后台代码:

    @GetMapping("/addPets/{id}")
        public String addPets(@PathVariable("id") Long id, ModelMap mmap)
        {
            Users users = usersService.selectUsersById(id);
            List<Pets> list = petsService.selectPetsList(new Pets());
            mmap.put("petsList", list);
            Map<Object, Object> map = new HashMap<>();
            for(Pets pets : list){
                map.put(pets.getLevel(), pets);
            }
            mmap.put("list", JSONObject.toJSON(map));
            return prefix + "/addPets";
        }

    前端代码:

    <label class="col-sm-3 control-label is-required">宠物:</label>
                    <div class="col-sm-8">
                        <select name="level" id="level" lay-verify="required" class="form-control">
                            <option th:each="pets:${petsList}" th:value="${pets.id}"
                                    th:text="${pets.name}"></option>
                        </select>
                    </div>
    petsList后台获取到的集合th:each进行遍历,pets作为集合对象的变量名称,th:value="${pets.id}作为value值
    th:text="${pets.name}"作为需要显示的内容
    

    效果如下:

     

    二、根据选择option动态加载内容

    效果如下:

    前端代码:

    <!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <th:block th:include="include :: header('分发宠物')" />
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <input name="petsLists" id="petsLists" type="hidden" th:value="${list}">
            <form class="form-horizontal m" id="form-users-edit" th:object="${users}">
                <input name="id" th:field="*{id}" type="hidden">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">手机号:</label>
                    <div class="col-sm-8">
                        <input name="phone" th:field="*{phone}" class="form-control" type="text" required readonly="readonly">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">宠物:</label>
                    <div class="col-sm-8">
                        <select name="level" id="level" lay-verify="required" class="form-control">
                            <option th:each="pets:${petsList}" th:value="${pets.level}"
                                    th:text="${pets.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group" style="display:none" id="levelDiv">
                    <label class="col-sm-3 control-label is-required">级别:</label>
                    <div class="col-sm-8">
                        <input name="levell" id="levell"  class="form-control" type="text" required readonly="readonly">
                    </div>
                </div>
                <div class="form-group" style="display:none" id="priceDiv">
                    <label class="col-sm-3 control-label is-required">价值:</label>
                    <div class="col-sm-8">
                        <input name="priceLimit" id="priceLimit" class="form-control" type="text" required readonly="readonly">
                    </div>
                </div>
                <div class="form-group" style="display:none" id="profitDiv">
                    <label class="col-sm-3 control-label is-required">合约收益:</label>
                    <div class="col-sm-8">
                        <input name="profit" id="profit" class="form-control" type="text" required readonly="readonly">
                    </div>
                </div>
                <div class="form-group" style="display:none" id="spendDiv">
                    <label class="col-sm-3 control-label is-required">预约/直购领养消耗积分:</label>
                    <div class="col-sm-8">
                        <input name="spend" id="spend" class="form-control" type="text" required readonly="readonly">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">状态:</label>
                    <div class="col-sm-8">
                        <select name="state" lay-verify="required" class="form-control">
                            <option value="0">收益中(有收益)</option>
                            <option value="1">待转让(无收益)</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">价值:</label>
                    <div class="col-sm-8">
                        <input name="price" class="form-control" type="text" required>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer" />
        <script type="text/javascript">
            var prefix = ctx + "system/users";
            $("#form-users-edit").validate({
                focusCleanup: true
            });
    
            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/saveAddPets", $('#form-users-edit').serialize());
                }
            }
    
            $("#level").change(function() {
                var petsLists = $("#petsLists").val();
                var json = JSON.parse(petsLists);
                var level = $("#level").val();
                var objects = json[level];
                $("#levelDiv").show();
                $("#levell").val(objects.level);
                $("#priceDiv").show();
                $("#priceLimit").val(objects.priceMin + " - " + objects.priceMix);
                $("#profitDiv").show();
                $("#profit").val(objects.profitDays + "天/" + objects.profitRate * 100 + "%");
                $("#spendDiv").show();
                $("#spend").val(objects.appointmentAmount + " / " + objects.payAmount);
            });
        </script>
    </body>
    </html>

    1、

     

    首先将petsList转为json对象,然后把select选择的值看作key去获取其pets对象,接下来把相应div设为可见并且赋予对应的值即可。

     

    注:默认其div为隐藏不可见,当select有变化时将其设为可见。

     

    展开全文
  • 首先要实现的效果,如图:那么,针对整个项目的前提思路:Ajax案例之三级联动:功能需求:页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,...

    首先要实现的效果,如图:

    6c22b220f0cb111a3074591860e36656.png

    那么,针对整个项目的前提思路:

    Ajax案例之三级联动:

    功能需求:

    页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中出现对应的该市下面的区/县信息

    技术分析:

    ajax技术+jsp+servlet+jdbc

    需求分析(思路):

    1、创建页面:页面中有三个下拉框,分别为省、市、区/县

    2、页面加载成功发起ajax请求,请求省的信息,并将响应结果填充到省下拉框中

    3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求请求该省下的市信息,并将响应数据填充到市下拉框

    4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求请求该市下的区/县信息,并将数据填充到区/县下拉框中

    数据库设计:

    创建表(area):存储了省、市、区/县信息

    设计表实现一:只存储了数据,但是数据之间的层级关系没有存储。

    地区id:areaid

    地区名:areaname

    设计表实现二:

    地区id:areaid

    地区名:areaname

    地区上级id:parentid

    sql语句设计:

    查询所有的省信息:

    select * from area where parentid=0;

    查询选择的省的市信息(假如:选择的山东省的areaid为110000,)

    select * from area where parentid=110000;

    查询选择的市的区/县信息(假如:选择的山东省的济南市areaid为110001)

    select * from area where parentid =110001;

    代码中

    select * from area where parentid=?;

    数据库实现:将资料中提供的area.sql文件导入到数据库中即可

    功能实现:参照源码即可

    代码缺陷:发现请求省,市,县的代码中基本上是一致的。代码的冗余量有点大

    解决:考虑使用封装

    实现:形同的保留,不同的传参。

    附上数据库表以及源码:

    cca38ece4d29d430235e9a15391ef0f8.png

    dao层接口:

    package com.zc.dao;
    
    import java.util.List;
    
    import com.zc.pojo.Area;
    
    public interface AreaDao {
    
    	/*
    	 * 根据pid查询地区信息 
    	 */
    	List<Area> getAreaInfoDao(String pid);
    
    }

    dao层实现类:

    package com.zc.dao.impl;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    import java.util.List;
    
    import com.zc.dao.AreaDao;
    import com.zc.pojo.Area;
    import com.zc.util.DBUtil;
    
    public class AreaDaoImpl implements AreaDao {
    
    	@Override
    	public List<Area> getAreaInfoDao(String pid) {
    		//声明jdbc变量
    		Connection conn = null;
    		PreparedStatement ps = null;
    		ResultSet rs = null;
    		//声明变量
    		ArrayList<Area> la = null;
    		try {
    			//获取连接
    			conn = DBUtil.getConnection();
    			//创建SQL命令
    			String sql = "select * from area where parentid = ?";
    			//创建SQL命名对象
    			ps = conn.prepareStatement(sql);
    			//给占位符赋值
    			ps.setString(1, pid);
    			//执行sql
    			rs = ps.executeQuery();
    			la = new ArrayList<>();
    			//遍历结果
    			while(rs.next()){
    				//创建实体类对象
    				Area a = new Area();
    				a.setAreaid(rs.getInt("areaid"));
    				a.setAreaname(rs.getString("areaname"));
    				a.setParentid(rs.getInt("parentid"));
    				a.setArealevel(rs.getInt("arealevel"));
    				a.setStatus(rs.getInt("status"));
    				la.add(a);
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}finally{
    			DBUtil.closeAll(rs, ps, conn);
    		}
    		
    		//关闭资源
    		//返回
    		return la;
    		
    	}
    
    }
    

    pojo包实体类:

    package com.zc.pojo;
    
    public class Area {
    
    	private int areaid;
    	private String areaname;
    	private int parentid;
    	private int arealevel;
    	private int status;
    	public Area() {
    		super();
    	}
    	public Area(int areaid, String areaname, int parentid, int arealevel,
    			int status) {
    		super();
    		this.areaid = areaid;
    		this.areaname = areaname;
    		this.parentid = parentid;
    		this.arealevel = arealevel;
    		this.status = status;
    	}
    	@Override
    	public int hashCode() {
    		final int prime = 31;
    		int result = 1;
    		result = prime * result + areaid;
    		result = prime * result + arealevel;
    		result = prime * result
    				+ ((areaname == null) ? 0 : areaname.hashCode());
    		result = prime * result + parentid;
    		result = prime * result + status;
    		return result;
    	}
    	@Override
    	public boolean equals(Object obj) {
    		if (this == obj)
    			return true;
    		if (obj == null)
    			return false;
    		if (getClass() != obj.getClass())
    			return false;
    		Area other = (Area) obj;
    		if (areaid != other.areaid)
    			return false;
    		if (arealevel != other.arealevel)
    			return false;
    		if (areaname == null) {
    			if (other.areaname != null)
    				return false;
    		} else if (!areaname.equals(other.areaname))
    			return false;
    		if (parentid != other.parentid)
    			return false;
    		if (status != other.status)
    			return false;
    		return true;
    	}
    	@Override
    	public String toString() {
    		return "Area [areaid=" + areaid + ", areaname=" + areaname
    				+ ", parentid=" + parentid + ", arealevel=" + arealevel
    				+ ", status=" + status + "]";
    	}
    	public int getAreaid() {
    		return areaid;
    	}
    	public void setAreaid(int areaid) {
    		this.areaid = areaid;
    	}
    	public String getAreaname() {
    		return areaname;
    	}
    	public void setAreaname(String areaname) {
    		this.areaname = areaname;
    	}
    	public int getParentid() {
    		return parentid;
    	}
    	public void setParentid(int parentid) {
    		this.parentid = parentid;
    	}
    	public int getArealevel() {
    		return arealevel;
    	}
    	public void setArealevel(int arealevel) {
    		this.arealevel = arealevel;
    	}
    	public int getStatus() {
    		return status;
    	}
    	public void setStatus(int status) {
    		this.status = status;
    	}
    }
    

    service层接口:

    package com.zc.service;
    
    import java.util.List;
    
    import com.zc.pojo.Area;
    
    public interface AreaService {
    	/*
    	 * 查询地区信息
    	 */
    	List<Area> getAreaInfoService(String pid);
    
    }
    

    service层实现类:

    package com.zc.service.impl;
    
    import java.util.List;
    
    import com.zc.dao.AreaDao;
    import com.zc.dao.impl.AreaDaoImpl;
    import com.zc.pojo.Area;
    import com.zc.service.AreaService;
    
    public class AreaServiceImpl implements AreaService {
    
    	//创建dao层对象
    	AreaDao ad = new AreaDaoImpl();
    	@Override
    	public List<Area> getAreaInfoService(String pid) {
    		// TODO Auto-generated method stub
    		return ad.getAreaInfoDao(pid);
    	}
    
    }
    

    servlet:

    package com.zc.servlet;
    
    import java.io.IOException;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.google.gson.Gson;
    import com.zc.pojo.Area;
    import com.zc.service.AreaService;
    import com.zc.service.impl.AreaServiceImpl;
    
    public class AreaServlet extends HttpServlet {
    
    	@Override
    	protected void service(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		//设置请求编码格式
    		req.setCharacterEncoding("utf-8");
    		//设置响应编码格式
    		resp.setContentType("text/html;charset=utf-8");
    		//获取请求信息
    		String pid = req.getParameter("parentid");
    		//处理请求
    			//获取业务层对象
    			AreaService as = new AreaServiceImpl();
    			List<Area> la = as.getAreaInfoService(pid);
    		//响应处理结果
    			//直接响应
    			resp.getWriter().write(new Gson().toJson(la));
    	}
    }
    

    jsp页面:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'select.jsp' starting page</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	<!--
    	<link rel="stylesheet" type="text/css" href="styles.css">
    	-->
    	<!-- 引入jq文件 -->
    	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    	<!-- 声明js代码域 -->
    	<script type="text/javascript">
    		//页面加载成功请求省的信息
    		$(function(){
    			//发起ajax请求,请求所有的省信息
    			getData(0,"pre");
    			$("#pre").change(function(){
    				//获取当前选择的省的areaid
    				var areaid = $("#pre").val();
    				//发起ajax请求,请求当前省的市信息
    				getData(areaid,"city");
    			})
    			//页面加载成功给市下拉框添加onchange事件
    			$("#city").change(function(){
    				//获取当前选择的市的areaid
    				var areaid = $("#city").val();
    				getData(areaid,"town");
    			})
    			//封装公共方法
    		function getData(areaid,sid){
    			$.get("area",{parentid:areaid},function(data){
    				//使用eval方法将数据转化为js对象
    				eval("var areas="+ data);
    				//将响应省数据填充到省下拉框中
    					//获取下拉框对象
    					var sel = $("#"+sid);
    					//清空原有内容
    					sel.empty();
    					//遍历
    					for(var i = 0;i<areas.length;i++){
    						//填充
    						sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
    						
    					}
    					//触发省下拉框的change事件
    					$("#"+sid).trigger("change");
    			})
    		}
    	})
    		
    	</script>
      </head>
      
      <body style="background-color:silver ;">
      		<div style="margin:auto;width: 750px;margin-top: 200px">
        	省:<select name="" id="pre" style="width:200px;height:30px"></select>
        	市:<select name="" id="city"style="width:200px;height:30px"></select>
        	区/县:<select name="" id="town"style="width:200px;height:30px"></select>
        	</div>
      </body>
    </html>
    
    

    第二个案例(搜索框)

    效果如图:

    14723895a49c503f36d23f1d8d238881.png

    ajax之搜索框关键字提示语:

    功能需求:

    用户在搜索框中输入关键字,然后搜索框下出现下拉选项,提示关键字的提示语。

    用户可以使用鼠标进行提示语的选择,也可以使用键盘的上下键来进行选择。

    技术分析:

    ajax技术+servlet+jsp+jdbc

    功能分析(思路):

    1、创建搜索界面(搜索框和提示语div和搜索按钮)

    2、给搜索框添加onkeyup事件,键盘弹起时发送ajax请求,请求当前用户输入的信息对应的提示语数据

    3、将提示语数据填充到搜索框下的div中

    问题:

    现在用户在搜索框上单击键盘的任意一个键都会发起ajax请求,请求提示语数据。

    解决:

    判断用户单击的键盘的按键符合要求再发请求。

    解决:

    获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取

    4、实现使用鼠标选择提示语

    5、实现使用键盘的上和下键选择提示语

    6、实现鼠标和键盘的联动操作

    7、将显示提示语的div进行隐藏,当有提示语的时候显示隐藏的div

    完善:

    问题1:只要用户在搜索框中出现键盘点击动作,都会触发键盘事件的执行。而只要数据符合要求,都会发送ajax请求,请求提示语信息。点击一次都发一次。但是其实只需要最后一次进行请求发生即可。

    解决1:

    使用延迟发送请求。

    使用1:

    window.setTimeout

    问题2:

    event对象在火狐浏览器中使用window.event获取不到。

    解决2:

    在获取浏览器中使用传参的方式给event进行赋值。

    使用:参照源码即可

    数据库设计:

    创建表:(data) 存储了常用的关键字数据

    关键字编号:id

    关键字数据:title

    说明:remark

    SQL语句设计:查询以用户当前搜索框数据开头的关键字

    select * from t_data where title like 'a%'

    注意:

    测试数据不要太多。

    数据库实现:在数据库中创建表即可,并添加测试数据。

    附上数据库表以及代码:

    cbee9a44315a28708988568e833d2fe2.png

    dao层接口:

    package com.zc.dao;
    
    import java.util.List;
    
    import com.zc.pojo.Data;
    
    public interface SearchDao {
    
    	List<Data> getSearchInfoDao(String sdata);
    
    }
    

    dao层实现类:

    package com.zc.dao.impl;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.util.ArrayList;
    import java.util.List;
    
    import com.zc.dao.SearchDao;
    import com.zc.pojo.Data;
    import com.zc.util.DBUtil;
    
    public class SearchDaoImpl implements SearchDao {
    
    	@Override
    	public List<Data> getSearchInfoDao(String sdata) {
    		Connection conn = null;
    		PreparedStatement ps = null;
    		ResultSet rs = null;
    		ArrayList<Data> ld = null;
    		try {
    			conn = DBUtil.getConnection();
    			String sql = "select * from t_data where title like concat(?,'%')";
    			ps = conn.prepareStatement(sql);
    			ps.setString(1, sdata);
    			rs = ps.executeQuery();
    			ld = new ArrayList<>();
    			while(rs.next()){
    				Data d = new Data();
    				d.setId(rs.getInt("id"));
    				d.setTitle(rs.getString("title"));
    				d.setRemark(rs.getString("remark"));
    				ld.add(d);
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}finally{
    			DBUtil.closeAll(rs, ps, conn);
    		}
    		return ld;
    	}
    
    }
    

    pojo包下的实体类:

    package com.zc.pojo;
    
    public class Data {
    
    	private int id;
    	private String title;
    	private String remark;
    	public Data() {
    		super();
    	}
    	public Data(int id, String title, String remark) {
    		super();
    		this.id = id;
    		this.title = title;
    		this.remark = remark;
    	}
    	@Override
    	public int hashCode() {
    		final int prime = 31;
    		int result = 1;
    		result = prime * result + id;
    		result = prime * result + ((remark == null) ? 0 : remark.hashCode());
    		result = prime * result + ((title == null) ? 0 : title.hashCode());
    		return result;
    	}
    	@Override
    	public boolean equals(Object obj) {
    		if (this == obj)
    			return true;
    		if (obj == null)
    			return false;
    		if (getClass() != obj.getClass())
    			return false;
    		Data other = (Data) obj;
    		if (id != other.id)
    			return false;
    		if (remark == null) {
    			if (other.remark != null)
    				return false;
    		} else if (!remark.equals(other.remark))
    			return false;
    		if (title == null) {
    			if (other.title != null)
    				return false;
    		} else if (!title.equals(other.title))
    			return false;
    		return true;
    	}
    	@Override
    	public String toString() {
    		return "Data [id=" + id + ", title=" + title + ", remark=" + remark
    				+ "]";
    	}
    	public int getId() {
    		return id;
    	}
    	public void setId(int id) {
    		this.id = id;
    	}
    	public String getTitle() {
    		return title;
    	}
    	public void setTitle(String title) {
    		this.title = title;
    	}
    	public String getRemark() {
    		return remark;
    	}
    	public void setRemark(String remark) {
    		this.remark = remark;
    	}
    }
    

    service层接口:

    package com.zc.service;
    
    import java.util.List;
    
    import com.zc.pojo.Data;
    
    public interface SearchService {
    
    	List<Data> getSearchInfoService(String sdata);
    
    }
    

    service层实现类:

    package com.zc.service.impl;
    
    import java.util.List;
    
    import com.zc.dao.SearchDao;
    import com.zc.dao.impl.SearchDaoImpl;
    import com.zc.pojo.Data;
    import com.zc.service.SearchService;
    
    public class SearchServiceImpl implements SearchService {
    	//创建dao层对象
    	SearchDao sd = new SearchDaoImpl();
    
    	@Override
    	public List<Data> getSearchInfoService(String sdata) {
    		
    		return sd.getSearchInfoDao(sdata);
    	}
    
    }
    

    servlet:

    package com.zc.servlet;
    
    import java.io.IOException;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.google.gson.Gson;
    import com.zc.pojo.Data;
    import com.zc.service.SearchService;
    import com.zc.service.impl.SearchServiceImpl;
    
    public class SearchServlet extends HttpServlet {
    
    	@Override
    	protected void service(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		req.setCharacterEncoding("utf-8");
    		resp.setContentType("text/html;charset=utf-8");
    		String sdata = req.getParameter("sdata");
    		SearchService ss = new SearchServiceImpl();
    		List<Data> ld = ss.getSearchInfoService(sdata);
    		resp.getWriter().write(new Gson().toJson(ld));
    	}
    }
    

    jsp页面:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'search.jsp' starting page</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	<!--
    	<link rel="stylesheet" type="text/css" href="styles.css">
    	-->
    	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    	<script type="text/javascript">
    		//创建计数器
    		var count = -1;
    		//声明变量记录地址
    		var id;
    		$(function(){
    			//给搜索框添加键盘弹起事件
    			$("#search").keyup(function(event){
    				//声明正则表达式判断空格
    				var reg = /^s+$/g;
    				//获取event对象
    				var eve = window.event || event;
    				//获取用户当前点击的键盘值
    				var code = eve.keyCode;
    				
    				//判断code的值是否符合要求
    				if(code>=65&code<=90 || code==8 || code==32){
    					//获取用户当前搜索框中的数据
    					var sd = $("#search").val();
    					//判断请求数据是否为空
    					if(sd=="" || reg.test(sd)){
    						return;
    					}
    					//清除之前将要发的请求
    					window.clearTimeout(id);
    					//延迟发送请求
    					id=window.setTimeout(function(){
    						//发起ajax请求,请求当前用户的搜索框提示语信息
    						$.get("search",{sdata:sd},function(data){
    							//使用eval方法将数据转换为对象
    							eval("var sd="+data);
    							//获取提示语div元素对象
    							var dataDiv = $("#dataDiv");
    							//清空原有内容
    							dataDiv.empty();
    							//显示隐藏的div
    							if(sd.length>0){
    								dataDiv.css("display","");
    							}
    							
    							//将提示语填充到div中
    							for(var i = 0;i<sd.length;i++){
    								dataDiv.append("<div style='padding:5px;'>"+sd[i].title+"</div>");
    							}
    							//给提示语添加鼠标选择效果
    							$("#dataDiv div").mouseover(function(){
    								//清空所有div背景颜色
    								$("#dataDiv div").css("background-color","");
    								//将当前选择的div背景颜色变成灰色
    								$(this).css("background-color","gray");
    								/* //将当前选择的div中的提示语数据改变到搜索框中
    								$("#search").val($(this).html()); */
    								//进行鼠标和键盘的联动,将当前鼠标选择的div赋值给键盘
    								count = $(this).index();
    								
    							})
    							//给提示语div增加单击事件,用来选择提示语
    							$("#dataDiv div").click(function(){
    								//将当前选择的div中的提示语数据改变到搜索框中
    								$("#search").val($(this).html());
    								//隐藏当前所有填充提示语div
    								$("#dataDiv").css("display","none");
    							})
    						})
    					
    					}, 1000);
    				}	
    				//判断用户点击的是否是下键
    				if(code==40){
    					//判断是否有提示语
    					if($("#dataDiv div").length>0){
    						//判断
    						count = count<$("#dataDiv div").length-1?++count:0;
    						//清空原有颜色
    						$("#dataDiv div").css("background-color","");
    						//让提示语中的第一个div背景色为灰色
    						$("#dataDiv div:eq("+count+")").css("background-color","gray");
    						//将请求的提示语改变到搜索框中
    						$("#search").val($("#dataDiv div:eq("+count+")").html());
    					}
    					
    				}
    				//判断用户点击的是否是上键
    				if(code==38){
    					//判断是否有提示语
    					if($("#dataDiv div").length>0){
    						//判断
    						count = count>0?--count:$("#dataDiv div").length-1;
    						//清空原有颜色
    						$("#dataDiv div").css("background-color","");
    						//让提示语中的第一个div背景色为灰色
    						$("#dataDiv div:eq("+count+")").css("background-color","gray");
    						//将请求的提示语改变到搜索框中
    						$("#search").val($("#dataDiv div:eq("+count+")").html());
    					}
    				}
    				
    			})
    			
    		})
    	</script>
      </head>
      
      <body>
      	<div id="container" style="width:400px;margin: auto">
      		<div id="sdiv" style="width:550px;margin: auto;margin-top: 200px;">
      		<input type="text" name="search" id="search" value="" style="width:400px;height:30px;font-size: 18px;"  />
        	<input type="button" value="搜索" style="height:30px;width:100px" />
      		</div>
      		<!-- 提示语div  -->
    		<div id="dataDiv" style="width:400px;height:300px;border: solid 1px;display: none"></div>
      	</div>
      	
      </body>
    </html>
    

    以上就是两个案例的全部内容。

    展开全文
  • 在写12306爬虫时,遇到选择座席信息时,需要遍历select下拉框获取其中的座席信息。 代码如下: seat_types = self.driver.find_element_by_xpath('.//select[starts-with(@id,"seatType")]') seat_ptions...
  • Django利用遍历数据,使用下拉框展现,给默认值 如下图,赋予默认值 给默认值,直接贴代码 <select name="prj_id" lay-filter="aihao"> {% for prj in prj_list %} <option value="{{ prj.prj_id }}" {% if...
  • 下拉框处理后台list

    千次阅读 2015-10-13 11:24:26
    items:list对象; var:遍历出的对象; varStatus属性:可以方便我们实现一些与行数相关的功能,如:奇数行、偶数行差异;最后一行特殊处理等等。先就varStatus属性常用参数总结下: ${status.index} 输出行号,从...
  • select = driver.find_element_by_id("id_num")  options_list = select.find_elements_by_tag_name("option")  time.sleep(2)  count_option = 0  for option in options_list:  
  • 在实现购物车时遇到了一个问题:购物车每条数据都是遍历出来的(属于未来数据),当用多选框执行选择操作时,总是无法获取每个选项的特定ID值 &amp;amp;amp;lt;ul class=&amp;amp;quot;commodity_list_...
  • function selectclassname(){  $.ajax({  url:"queryschoolclasslists.action",  async:false,  dataType:"json",  type:"post", ... success:function (formData) { ... var list = formD...
  • freemaker遍历list,我知道可以用<#list></#list>,但是如果这些数据里面有需要用到下拉框的属性,该如何写代码呢?比如list里面存了十个人的数据,每个人都有一个省份的信息,需要用到下拉框,这时候代码可以怎么写...
  • //以下是select-options下拉框List遍历全部属性,全部设置为option ();"> request.setCharacterEncoding("utf-8
  • 遍历标签集合方法

    2020-03-27 17:35:58
    需求:遍历选框元素的时候,获取子元素的一些属性,并给一些逻辑操作,比如符合要求的选中,特此记录一下,经常都是不长记性,明明写过的,但是下次还是要线上断点看看或者log看看,基础不扎实,就只有多记录 ...
  • 1. 将从数据库或者配置文件等查询出来的动态下拉框的内容作为一个list 通过request.setAttibutte(‘list’,list)的方式set到页面;...3. 当查询完成显示页面时,js遍历list下拉框中的值是否与item相等,若相等则将其...
  • projectlist: [],//Select 遍历集合 itemId: 0 } }; 下拉框定义 //v-model="itemId" 绑定值到itemId上 //定义事件getitemId下拉框改变获取信息 <el-select placeholder="项目选择...
  • Vue+ElementUI el-select下拉框取对象其他元素 根据业务需求一般value填的都是id进行一些操作,今天发现了个问题就是我想取当前选中的对象其他信息,比如name...通过find方法遍历list,返回相对应的当前的item。 ...
  • List<ResourceTypeBean> resTypeList=(List)request.getAttribute("RESOURCE_TYPE_LIST"); 页面已经获取到值 (this);" > “typeId” >typeName 怎么遍历Id和Name值
  • keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 ...方法一,filter()遍历: filtList = list.filter(data => { return data &&a...
  • //遍历皮肤,放到列表中 foreach (DevExpress.Skins.SkinContainer skin in DevExpress.Skins.SkinManager.Default.Skins) { list.Add(skin.SkinName); }...
  • 在DB层写好查询方法,在JSP层直接把查询结果取出放在字符串数组的LIST里面,这里使用动态数组ArrayList。将数组值遍历作为option的值即可。 String subsystem_sql ="select full_name from subsystem_info ...
  • &lt;select&gt;选择方法: selectByIndex() //通过下拉列表中选项的索引选中三项,在Java中索引从0开始;...getOptions() //返回select标签中的所有选项,返回类型是list集合,可以遍历操作所有选项 ...
  • //动态生成下拉框 $.ajax({  type:"GET",  async:false, //设为同步请求(异步加载的话后面的遍历方法获取不到option)  url:context+"/service/demo/hfjd/findJdmc",//获取option值得方法返回LIST类型  ...
  • 一、条件断点循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值。参考上图,在断点的位置,右击断点旁边的小红点,会出来一个界面,在Condition这里填入断点条件即可,这样调试时,就会...
  • 原文:dwz.cn/zMaNp9Kf一、条件断点循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值。参考上图,在断点的位置,右击断点旁边的小红点,会出来一个界面,在Condition这里填入断点条件...
  • * 所有展示项目为主表客表的某一项值和遍历主表的值对应 这里面 下拉框所有选项值是主表 */ var str1 = ""; for (var j = 0; j ; j++) {// 下拉框是主家从静态页面获取并且遍历它 ...

空空如也

空空如也

1 2 3
收藏数 50
精华内容 20
关键字:

下拉框遍历list