原理：用户在文本框中输入一个字符(或输入字符的首字母)，然后利用ajax，从后台服务器中进行检索，组装后并返回到页面，页面通过javascript进行解析，在一个层里面显示出来。

类似的效果如下：

<%@ page language="java" pageEncoding="UTF-8"%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

  <title>jQuery插件--jqueryflexselect<span class="wp_keywordlink_affiliate"><a href="http://tieguanyin168.usa1.ywwm.org/index.php/tag/autocomplete" title="查看 下拉框自动提示 中的全部文章" target="_blank">下拉框自动提示</a></span></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">

   

  <!-- 引入插件css、js -->

  <link rel="stylesheet" href="<%=request.getContextPath()%>/js/ajaxfileupload.css" type="text/css" media="screen" />

  <link rel="stylesheet" href="<%=request.getContextPath()%>/js/flexselect.css" type="text/css" media="screen" />

  <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.1.js"></script>

  <script type="text/javascript" src="<%=request.getContextPath()%>/js/liquidmetal.js"></script>

  <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.flexselect.js"></script>

  <script type="text/javascript"> 

  $(document).ready(function() {

      //<span class="wp_keywordlink_affiliate"><a href="http://tieguanyin168.usa1.ywwm.org/index.php/tag/autocomplete" title="查看 下拉框自动提示 中的全部文章" target="_blank">下拉框自动提示</a></span>

   $("select[class*=flexselect]").flexselect();

    

   //二级联动

   var city=$("#city").flexselect();

   $("#province").flexselect({

    callback : function(){

        var province=$("#province").val();

     var result = [];

     if(province==1){ //浙江

      //杭州、宁波、温州、台州、绍兴

      result.push({name:'杭州', value:1});

      result.push({name:'宁波', value:2});

      result.push({name:'温州', value:3});

      result.push({name:'台州', value:4});

      result.push({name:'绍兴', value:5});

     }

     if(province==2){ //福建

      result.push({name:'福州', value:1});

      result.push({name:'厦门', value:2});

      result.push({name:'宁德', value:3});

      result.push({name:'莆田', value:4});

      result.push({name:'泉州', value:5});

     }

     city.flexselect[0].cache = result;

    }

   });

    

  });

  </script>

 </head>

 

 <body>

 <br/>&nbsp;&nbsp;&nbsp;城市：

 <select class="flexselect">

  <option value=""></option>

  <option value="1">福州</option>

  <option value="2">厦门</option>

  <option value="3">宁德</option>

  <option value="4">莆田</option>

  <option value="5">泉州</option>

  <option value="6">漳州</option>

  <option value="7">龙岩</option>

  <option value="8">三明</option>

  <option value="9">南平</option>

 </select><br/><br/>

  

 &nbsp;&nbsp;&nbsp;省份(级联下拉)：

 <select id="province">

  <option value=""></option>

  <option value="1">浙江</option>

  <option value="2">福建</option>

 </select>

 &nbsp;&nbsp;&nbsp;城市：

 <select id="city">

  <option value=""></option>

 </select>

 </body>

</html>

jQuery插件–jqueryflexselect下拉框自动提示的更多相关文章

  1. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  2. jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...

  3. jQuery之双下拉框

    双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  4. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  5. JQuery操作select下拉框

    JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...

  6. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  7. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  8. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  9. Jquery封装：下拉框插件

    代码如下: ;(function ($, window) { $.fn.addSelect = function (options) { //合并传入与默认的参数 var opts = $.exten ...

随机推荐

  1. 20165212 预备作业3 Linux安装及学习

    20165212 预备作业3Linux安装及学习 Linux虚拟机的安装过程 我像大部分同学一样,通过助教学姐给的Ubuntu下载地址下载映像文件.VB,但是屡次出现问题,不停的闪出一下错误提示窗口: ...

  2. PHP匹配Email、URL、IP

    /* * 正则表达式匹配 */ $email = '137813369@qq.com'; $regex = '/\w+([−+.]\w+)*@\w+([−.]\w+)*\.\w+([−.]\w+)*/ ...

  3. 图像对比度调整的simulink仿真总结

    图像对比度调整可以由一个模块contrast adjustment 完成,参数有输入范围和输出范围,计算过程由以下公式决定 解释一下,当input<=low_in的时候输出的值是low_out+ ...

  4. 关于json格式字符串解析并用mybatis存入数据库

    园子里面找了很多关于json解析后存入数据库的方法,不是太乱,就是没有写完,我下面的主题代码多是受下面两位的启发,请按顺序查看 http://www.cnblogs.com/tian830937/p/ ...

  5. Cascalog了解

    Cascalog一种能使在Hadoop上使用Clojure处理数据变得简单直观的工具. Cascalog综合了两大顶尖技术:Clojure和Hadoop,同时让Datalog焕发青春. Cascalo ...

  6. 一次解决spark history server日志不见

    通过cloudera的旧版VM(centos6版本)跑spark,之后,想看一下日志研究一下job,stage以及task,压力很大的发现完全没有日志,180088页面打开后: Event log d ...

  7. undefined vs. null

    undefined vs. null 一.相似性 在JavaScript中,将一个变量赋值为undefined或null,老实说,几乎没区别. var a = undefined; var a = n ...

  8. (转)JavaMail中的Flag(邮件状态)

    本文转载自:http://blog.csdn.net/chjttony/article/details/6005594 标记邮件就是把邮件标记为已读,删除等操作,需要使用Flags类,它mail.ja ...

  9. 30个让人兴奋的视差滚动（Parallax Scrolling）效果网站--转

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...

  10. NoSQL v.s. RDB

    RDB 相对于 NoSQL 的劣势: 1. 集中式单点架构 2. 固定的数据模型: 可扩展性差,缺乏处理半结构化和非结构化数据的能力. 3. 扩容成本高:处理海量数据时存在性能瓶颈,大数据时代的存储需 ...