下拉菜单

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量861 收藏
点赞数
分类专栏： Web前端 文章标签： function javascript input table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yahuvi/article/details/5927209
版权

<%@ page contentType="text ml; charset=gb2312"%>
<HTML>
    <HEAD>
        <TITLE>可搜索输入下拉框实现</TITLE>
    </HEAD>
    <Script Language="JavaScript">
<!--
   var whichText;
   function selectStation(obj) {
          var objSelStation = obj;
       if (obj.selectedIndex != -1) {
           var stationName = obj.options[obj.selectedIndex].text;
           whichText.value = stationName;
       }
       var stobj= document.getElementsByName('hospitalCode')[0];
       showDivStation(this, false,'hospitalCode')//鼠标单击某一选项选定后关闭下拉框
    }

    //响应text的事件
       var pageD =0, pageU;
       function similarFind(txtObj,seledName) {
        var curStationName = txtObj.value;
        var objSelStation = document.getElementsByName(seledName)[0];//根据实际的form name修改
        var stationLength = objSelStation.options.length;
        var flag = true;
           pageU = pageD;
        //匹配用text中的数据跟下拉框中的数据
        for (var i=0; i<stationLength; i++) {
            var stationName = objSelStation.options[i].text;
            var re = new RegExp("^" + curStationName);
               if (stationName.match(re)) {
                if (i<stationLength - 10) {
                    objSelStation.selectedIndex = i + 10;
                }
                objSelStation.selectedIndex = i;
                   pageD = i;
                   pageU = i;
                   flag = false;
                break;
            }
        }
        if(flag) {
            for (var i=0; i<stationLength; i++) {
                var stationName = objSelStation.options[i].text;
                var re2 = new RegExp("^.*" + curStationName+'.*$');
                   if (stationName.match(re2)) {
                    if (i<stationLength - 10) {
                        objSelStation.selectedIndex = i + 10;
                    }
                    objSelStation.selectedIndex = i;
                       pageD = i;
                       pageU = i;
                    break;
                }
            }
        }
        //响应下移键
           if(event.keyCode==40) {
             pageD++;
             if(pageD==objSelStation.options.length) pageD=0;
             txtObj.value=objSelStation.options[pageD].text ;
             objSelStation.selectedIndex = pageD;
           }
        //响应上移键
           if(event.keyCode==38) {
             --pageU;
             if(pageU<0) pageU=objSelStation.options.length-1;
             txtObj.value = objSelStation.options[pageU].text;
             objSelStation.selectedIndex = pageU;
        }
    }
    //下拉框显示位置
    function showDivStation(obj, b,selName) {
        var divStation = document.getElementsByName(selName)[0]
        if (b) {
           whichText = obj;
           divStation.style.display="block";
           similarFind(obj,selName);
        } else {
           divStation.style.display="none";
        }
    }
   
    function removeNull(node) {
        if(node.value=='--未选择--')
        node.value = '';
    }
//-->
</Script>

    <BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
        <form name="caseLhBaseForm">
            <table>
                <tr>
                    <td valign="top">医院</TD>
                    <td>
                        <input type="text" name="hospitalCodeName" style="width: 330px"
                            οnfοcus="showDivStation(this, true,'hospitalCode')" οnclick="removeNull(this)"
                            οnkeyup="similarFind(this,'hospitalCode')" value="--未选择--">
                        <select size="6" name="hospitalCode"
                            style="display: none; width: 330px;"
                            οnclick="selectStation(this)">
                            <option value="">
                                --未选择--
                            </option>
                            <option value="340403007">
                                北京上地医院
                            </option>
                            <option value="340402006">
                                北京回龙观医院
                            </option>
                            <option value="340401005">
                                北京中关村医院
                            </option>
                            <option value="340401005">
                                上地第二医院
                            </option>
                            <option value="340403007">
                                回龙观第二医院
                            </option>
                            <option value="340402006">
                                朝阳医院
                            </option>
                            <option value="340401005">
                                海淀医院
                            </option>
                            <option value="340401005">
                                东城区医院
                            </option>
                        < lect>
                    </td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

孙彦辉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
下拉菜单的实现
qq_37244548的博客
05-14 262
目标： 步骤： 1，在一级菜单的第一个li标签里面添加一个ul>li*9>a[href="#"]>{子级导航$} <li><a href="#">导航1</a> <ul class="list-nav"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a>&lt.
JS写的:既可以输入又可以选择的selected
snowme103的专栏
02-25 241
[code="java"] POSTCODE aaa aab aac aba abb abc baa bab bac caa cab cac [/code]
可搜索输入下拉框实现
zxfjava2007的专栏
05-24 157
[code="java"] 可搜索输入下拉框实现 医院 --未选择-- 北京上地医院 北京回龙观医院 北京中关村医院 上地第二医院 回龙观第二医院 ...
javascript的select 输入匹配
秋风扶柳笛的专栏
11-26 2190
公司需要能输入的select样式标签  研究了一下 总结如下 1.创建了一个js文件selectAutocomplete.js var whichText;  function selectStation(obj,name) {   whichText =document.getElementById(name);   var objSelStation = obj;   if (ob
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
08-31
在使用Bootstrap构建网页时，下拉菜单是一种常见的交互元素，它允许用户在单个按钮下访问多个选项。然而，有时可能会遇到下拉菜单点击后无法显示的问题，这通常是由于JavaScript库加载顺序错误导致的。本篇文章将...
Bootstrap实现下拉菜单效果
09-02
下拉菜单是 Bootstrap 中常用的一个组件，它提供了一种简洁的方式来展示链接列表，通常用于导航栏或者设置菜单中。本文将详细介绍如何使用 Bootstrap 实现下拉菜单效果。 1. **基础结构** 创建一个下拉菜单，你...
jQuery 渐变下拉菜单
10-29
jQuery 渐变下拉菜单是一种常见的网页交互效果，用于创建美观且用户体验友好的导航菜单。这种效果通过结合CSS样式和jQuery JavaScript库来实现，使得用户鼠标悬停在菜单项上时，下拉子菜单以渐变的方式展开或收起。 ...
JSP带中文请求参数乱码的解决方法
孙彦辉的专栏
07-14 2603
在请求页面的请求参数需要用encodeURI进行转码,然后在接收请求的页面需要进行字符集转换。本例中的请求和接收页面的字符集都是UTF-8:1.请求的JSP页面用JavaScript的encodeURI()方法将参数转码:function toView(param){     var encodeparam = encodeURI(param) ;     window.location.href="/naias/advAna_form.do?method=showDetail&title="+encode
简单模态对话框
孙彦辉的专栏
03-29 855
<br />parent.html<br /> <br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    <br /><HTML>    <br /><HEAD>    <br /><TITLE> </TITLE>    <br /><script type="text/javascript"><!--     <br />function openModalDialog(url,name,iWidth,iHeight) 
全选
孙彦辉的专栏
10-08 565
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; char
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 691
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1044
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 516
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 990
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 284
【代码】博客前端项目学习day03——框架页。
javascript下拉菜单
12-08
JavaScript下拉菜单是一种常用的网页交互效果，它可以让用户在点击下拉箭头后，弹出一个选项列表供用户选择。在JavaScript中实现下拉菜单通常需要使用事件处理和DOM操作。 首先，我们需要在HTML中创建一个下拉菜单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值