动态下拉菜单框

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" %>