原理：用户在文本框中输入一个字符(或输入字符的首字母)，然后利用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. pat甲级 1152 Google Recruitment （20 分）

    In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...

  2. iOS客户端打包自动集成weex方案

    我司在2017年已经部分使用weex开发,然而开发weex 的人都知道,在前端开发完成之后需要集成到 安卓和iOS 各个app 之中.每次修改都要重新copy给各个app 负责人去打包,因此这是一种重 ...

  3. 重温CLR（九） 接口

    对于多继承(multiple inheritance)的概念,许多程序员并不陌生,他是指一个类从两个或多个基类派生的能力.例如,假定TransmitData类的作用是发送数据,ReceiveData类 ...

  4. Django之Models

    1.数据库的配置 1    django默认支持sqlite,mysql, oracle,postgresql数据库.  <1> sqlite django默认使用sqlite的数据库,默 ...

  5. Apache Accumulo

    Apache Accumulo 是一个可靠的.可伸缩的.高性能的排序分布式的 Key-Value 存储解决方案, 基于单元访问控制以及可定制的服务器端处理.Accumulo使用 Google BigT ...

  6. Cocos2d-x第一次调试出现的问题

    1.无法打开包括文件:“CCStdC.h“ http://blog.csdn.net/jbboy/article/details/9773087 2.无法打开文件“libcocos2d.lib” 用v ...

  7. 对两个奇葩的C语言程序的思考

    原文章的连接为:http://www.cnblogs.com/jacksu-tencent/default.html?page=2 1. 第一个程序例如以下: #include <stdio.h ...

  8. Spark Streaming性能调优

    数据接收并行度调优(一) 通过网络接收数据时(比如Kafka.Flume),会将数据反序列化,并存储在Spark的内存中.如果数据接收称为系统的瓶颈,那么可以考虑并行化数据接收.每一个输入DStrea ...

  9. java入门很简单之各种循环

    1.if结构的语法: <1> 简单的if :if (条件){ //代码块                                                           ...

  10. 语义分割【semantic-segmentation】资料备忘

    https://github.com/mrgloom/awesome-semantic-segmentation