JSP 根据输入内容匹配下拉框选项

最新推荐文章于 2022-07-12 15:31:47 发布
最新推荐文章于 2022-07-12 15:31:47 发布
阅读量436 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lxJack/archive/2011/05/03/2035029.html
版权
<%@ page contentType="text/html; 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;
        }
        showDivStation(this, false,'selStation')//鼠标单击某一选项选定后关闭下拉框
    }

//响应text的事件
   var pageD =0, pageU;
    function similarFind(txtObj,seledName) {
        var curStationName = txtObj.value;
        var objSelStation = eval("document.myform."+seledName);//根据实际的form name修改
        var stationLength = objSelStation.options.length;
   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;
                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 = eval("document.myform."+selName);//根据实际的form name修改
        if (b) {
            whichText = obj;
            divStation.style.top = 20;
            divStation.style.left = 0;
            divStation.style.display="block";
            similarFind(obj,selName);
        } else {
            divStation.style.display="none";
        }
    }
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="myform" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
     <td width="6%" valign="top">城市</TD>
     <td width="94%" bgcolor="#FFFFFF">
    <!-- onfocus获取焦点时弹出下拉框 onkeyup按上下键时在下拉框中移动 -->
    <input type="text" size="70" name="put" style="width:120" οnfοcus="showDivStation(this, true,'selStation')" οnkeyup="similarFind(this,'selStation')" value="">
    <!-- onclick鼠标点击时选择选项 -->
    <select name="selStation" size="6" style="display:none;width:120;" οnclick="selectStation(this)">
      <option value="BJ" >北京</option>
      <option value="SD" >山东</option>
      <option value="SX" >山西</option>
      <option value="HEB" >河北</option>
      <option value="HEN" >河南</option>
      <option value="HUB" >湖北</option>
      <option value="HUN" >湖南</option>
      <option value="GD" >广东</option>
      <option value="GX" >广西</option>
    </select>
   </td>
</table>
</form>
</BODY>
</HTML>


转载于:https://www.cnblogs.com/lxJack/archive/2011/05/03/2035029.html

weixin_30326515
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html下拉列表的jsp页面,jsp页面上可编辑下拉框，可根据输入的内容自动搜索匹配的下拉数据项...
weixin_39774445的博客
06-04 969
可输入的下拉框var j = 0;function SelectValue(obj){var input = obj.parentNode.nextSibling;document.all.box2.value = obj.options[obj.selectedIndex].text;document.getElementById("txtSection").value=obj.options[...
web App jsp页面使用下拉选项框
dawnStart的博客
03-11 1250
//获取所有乡镇 function getAreaAll(){ $.ajax({ type: 'post', dataType: 'json', url: "路径", success: function (data) { var areaItem = []; $.each(data,function(...
可编辑的下拉框 既可以编辑，又可以下拉选择
11-30
可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的
jsp页面上可编辑下拉框，可根据输入的内容自动搜索匹配的下拉数据项
02-15 778
可输入的下拉框 var j = 0; function SelectValue(obj) { var input = obj.parentNode.nextSibling; document.all.box2.value = obj.options[obj.selectedIndex].text; document.getElementById("txtSect
JSP中下拉列表匹配选中值的问题
Java海洋
12-31 3249
1.如果下拉列表的value值是01，002这样的值，就是前面可能带有0的值，在js中判断是否等于他们时，有可能会出现匹配不上，可以在匹配时，给value前面加一个1，再用parseInt()方法都转化成数字进行匹配 2.锁定下拉列表选中的值的方法有：   2.1如果是写死的，固定的option，则可以用：       2.11selected >全部，对于option比较少的适合
可编辑下拉框.动态加载数据
08-11
下拉框读取数据库数据.有时候数据多.会拉的很长.客户搜索起来很不方便.现在可以编辑下拉框,可根据输入的内容重新加载下拉框的内容.令客户选择查找起来更方便. 使用方法.将此js复制到项目中.在用到需要编辑下拉框的jsp界面中引用此js.在body 属性里. 调用onload事件. 测试方法:点击下拉框.随便输入一个字母.即可看到效果.
仿百度输入框（在输入框输入时，会根据输入的内容模糊查询相关的做成下拉框显示在下面，供选择）
11-23
输入页面和数据页面是两个页面，当用户输入时，会发送请求到数据页面，数据页面以json的形式返回数据
jQuery实现监听下拉框选中内容发生改变操作示例
12-04
总结一下，这个示例展示了如何使用jQuery监听下拉框的选中内容变化，并根据用户的选择更新页面其他部分。同时，它还演示了如何设置默认选中项，以及如何结合HTML和JavaScript进行动态交互。对于开发人员来说，理解并...
html js 从数据库里面 读取 select 内容,下拉框中的值从数据库动态获取
weixin_39629269的博客
06-04 2605
以t_crash_log表中的三个字段即手机类型、运营商和应用版本作为查询字段，查询字段的值即是我们要从数据库中动态获取放在下拉框中的。部分代码如下：1. jsp中定义三个select标签手机类型：运营商：应用版本：2.js/**获取供查询的下拉列表框选项值 */function getQueryCrashLog(){var optionsDev="全部";var optionsNet="全部"...
获取数据库内容放入下拉框中
weixin_45743799的博客
11-04 6236
获取数据库里的数据放入下拉框中，使下拉框显示的内容是数据库里的内容 功能分析： 设计并实现数据库 插入相关数据 在登陆页面点击注册按钮时跳到Servlet中 在Servlet中连接数据库 查询内容放入session中传给jsp页面 在jsp页面接受session内容并使用for循环输出 效果图演示 登陆页面 点击注册按钮之后（下拉框的数据是从SQLServer数据库里获取的数据） 看了上述...
jsp中extjs可查询下拉框html代码和js代码
03-31
1. 首先创建了一个Ext.data.Store对象，用于存储下拉框的选项数据，包括每个选项的名称和值。 2. 然后创建了一个Ext.form.field.ComboBox对象，用于显示可查询下拉框。设置了一些属性，包括数据源（store）、查询...
jsp 输入框同时支持手工输入（模糊搜索）和下拉选
qq_41353397的博客
12-11 1545
<input type="text" id="userOption" list="InfoList"> <datalist id="InfoList"> 　　<c:forEach items="${userlist}" var="userVo"> 　　　　<option value="${userVo.userid}" aa="${userVo.num}">${userVo.userid} </option> 　　
jsp实现下拉框选择加搜索框模糊查询
ZgaoYi的博客
07-12 4086
jsp实现下拉框选择加搜索框模糊查询 实现下拉框可输入，可搜索
jsp页面可输入下拉框实现
热门推荐
Zzooper的博客
04-06 1万+
可输入的下拉框            内容01  内容02  内容03
jquery如何实现根据输入内容过滤选项的下拉框
最新发布
04-01
1. 给下拉框添加keyup事件监听： ``` $("#selectBox").on("keyup", function() { // 过滤选项 }); ``` 2. 获取输入框中的内容： ``` var inputVal = $(this).val(); ``` 3. 使用filter方法过滤选项，将不符合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值