原理：用户在文本框中输入一个字符(或输入字符的首字母)，然后利用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. 基于jquery的可查询多级select控件（可记录历史选择）

    一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个   控件功能:1.可手动输入查询,也可点击下拉框查询, ...

  2. 【最全 干货 实例】 缓存手册（Memcached、redis、RabbitMQ）

    http://www.cnblogs.com/suoning/p/5807247.html 本章内容: Memcached 简介.安装.使用 Python 操作 Memcached 天生支持集群 re ...

  3. kali openvas安装

    最新的kali需要用apt-get安装后使用 安装 apt-get install openvas 自动设置 openvas-setup 检测设置 openvas-check-setup 如果检测没有 ...

  4. Unit06： 外部对象概述 、 window 对象 、 document 对象

    Unit06: 外部对象概述 . window 对象 . document 对象 小代码演示: <!DOCTYPE html> <html> <head> < ...

  5. linux保存的设置用户/组ID（set-user-ID）的测试

    直接贴代码和结果 // FileName: id.cpp #include <iostream> #include <unistd.h> using namespace std ...

  6. mybatis MySQL返回插入的主键ID,oracle不行

    <insertid=“doSomething"parameterType="map"useGeneratedKeys="true"keyProp ...

  7. python学习（二十） Python 中的比较：is 与 ==

    Python 中的比较:is 与 == 在 Python 中会用到对象之间比较,可以用 ==,也可以用 is .但是它们的区别是什么呢? is 比较的是两个实例对象是不是完全相同,它们是不是同一个对象 ...

  8. 编译安装x264

    网上也有相应的教程,之所以在这里重申一遍,是因为我试了网上很多的编译方法,都出现了问题,为此将此编译安装方法记录下来. 首先是 获取x264的网站:http://www.videolan.org/de ...

  9. Mybatis扩展

    分页插件PageHelper 其实Mybstis内部有实现逻辑分页的功能,但是较为麻烦和难用.这里记录一个分页插件PageHelper的使用,我们可以在它的github地址https://github ...

  10. jQuery笔记——插件

    验证插件 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解 放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验 插件都可以在JQueryUI 的 ...