prevAll ().length; 获取被选中元素上面的兄弟元素的个数
动态下拉菜单框思路
使用工具 java ajax mysql 新手手打 第一次 当做复盘 语言可能组织不合理 理解万岁
前台
定义一个html页面设置一个input输入框 在输入框下面添加一个div1显示下拉列表
列表项 使用div标签实现 通过ajax动态请求数据库 使用jq生成 最多显示5个根需求而定
添加对应的css
js实现动态菜单功能
给input输入框添加一个onkeyup事件
当键盘弹起时获取输入框中的value值使用trim()方法去除首尾空
如果获取到的数据为空, 使用div对象.html(" ");对下拉列表进行清空并隐藏,
如果不为空,通过ajax发送请求到服务器使用input输入框中的值进行模糊查询;将返回的结果转换位json数组格式,遍历json数组进行div 列表项的拼接最多拼接5次 给每一个div指定一个class方便后期获取.拼接完成以后将列表项添加到div1中并使其显示
按下键盘 上 下 给选中项添加背景颜色 按下键盘上 对应的code码是38 下是40
准备一个class 样式 bg设置bgcolor
当页面加载完成时 给网页 document 绑定一个onkeydown事件
首先定义一个event对象监听键盘
var eve=event||window.event;
如果监听到向上事件时 使input输入框失去焦点
通过上述的class 获取所有下拉框
使用prevAll方法获取被设置过bg样式的下拉框个数
如果为0的话 将下拉框中最后一个设置样式 因为下拉框选中只能有一个 所以添加样式之前先移除所有 下拉框的bg样式 通过eq(),addclass()实现
如果有设置过的话 prevAll().length会返回该元素前面有多少个兄弟元素
假设被选中元素下标为2前面就有两个兄弟元素 下标分别是0,1 上一个元素的下标就是 prevAll().length-1 当这个length减到0时 会继续向最后一个下拉框添加样式
如果监听到向下事件时 使input输入框失去焦点
通过上述的class 获取所有下拉框
通过hasClass("bg")判断是否被设置过样式 如果没有将第一个添加样式
如果被设置过 var len=prevAll().length获取该元素前面有多少个兄弟元素
继续判断是不是最后一个元素 如果是最后一个元素的话
(所有列表项个数-1==len){
// 假设共有5个元素 最后一个被选中时 他前面得到兄弟个数为4 5-当前元素也等于4
给第一个元素添加样式
}否则{
假设被选中的元素是4 它的下表是3 那他前面的兄弟个数(len)就有3个 所以下一个列表项的下标就是len+1
当下标加到4时元素个数是第5个 再次点击就会执行 上面的方法给第一个列表项添加样式
}
js代
传上来就没缩进了
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/5/15
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>百度下拉菜单</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box1{
width:498px;
border:1px solid skyblue;
border-bottom:none;
}
#inputid{
width:500px;
height:30px;
border:1px solid skyblue;
}
#box1 div{
border-bottom:1px solid skyblue;
height:28px;
}
.optcss{
background:skyblue;
}
</style>
<script src="js/jquery-3.4.0.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//页面加载完毕先将下拉框隐藏
// $(function () {
// $("#box1>div").hide();
// });
//通过ajax获取信息显示到下拉框中
//
function test() {
//获取文本框中的值
var inputval=$("#inputid").val().trim();
if (inputval.length==0){
$("#box1").hide().html(" ");
}else{
// $("#box1").html(" ");
//获取input框中的值
//发送ajax请求
$.get("Servlet",{"method":"selopt","val":inputval},function (res) {
//将获取到的信息 拼接到div中发送到页面
var opts="";
var arr=JSON.parse(res);
for (var i=0;i
if (i<5){
opts+="<div class='opt'>"+arr[i]+"</div>";
}
}
//在show直接修改了 div中的代码 相当于变相清空了里面的代码
$("#box1").show().html(opts);
});
}
}
//获取整个页面对象 绑定事件
$(document).keydown(function () {
// 上38 下40
var eve=event||window.event;
//如果按下上 将最后一个下拉选项颜色改变 并使输入框失去焦点
if(eve.keyCode==38){
$("#inputid").blur();
//获取 下拉框中被设置过bg元素的上面还有多少节点
var opts=$(".opt");
var csslengthup=$(".optcss").prevAll().length;
//判断是否有被设置过颜色的元素 如果没有
if (csslengthup==0){
//获取所有带opt的元素并将最后一个元素添加样式
//移除所有被选中样式
opts.removeClass("optcss");
//然后添加
opts.eq(opts.length-1).addClass("optcss");
}else{
//如果有被添加的元素 将该元素的前一个添加样式
opts.removeClass("optcss").eq(csslengthup-1).addClass("optcss");
}
}else if(eve.keyCode==40){
//使输入框失去焦点
$("#inputid").blur();
//获取所有的列表项
var opts=$(".opt");
//判断 如果没有被设置过样式 将第1个添加样式
if($(".optcss").hasClass("optcss")){
//获取设置了bg样式元素的哥哥节点
var csslengthdown=$(".optcss").prevAll().length;
if(csslengthdown==opts.length-1){//如果是最后一个元素 将第一个添加样式
//将第一个元素设置样式
opts.removeClass("optcss").eq(0).addClass("optcss");
}else{
opts.removeClass("optcss").eq(csslengthdown+1).addClass("optcss");
}
}else{
opts.removeClass("optcss").eq(0).addClass("optcss");
}
}
});
</script>
<body>
<input type="text" id="inputid" onkeyup="test()">
<div id="box1">
</div>
</body>
</html>
