原理：用户在文本框中输入一个字符(或输入字符的首字母)，然后利用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. L2-017. 人以群分

    社交网络中我们给每个人定义了一个“活跃度”,现希望根据这个指标把人群分为两大类,即外向型(outgoing,即活跃度高的)和内向型(introverted,即活跃度低的).要求两类人群的规模尽可能接近 ...

  2. 文件上传 jqueryForm

    关于formData方式ajax上传文件的方式在笔者随笔开发日记5-18中有描述,在此不做记录. 由于之前使用的是formData方式上传文件,但是在后期处理浏览器兼容问题的时候出现头痛的事情,for ...

  3. css 常用类名

    1.页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column  ...

  4. ballerina 学习九 Client endpoints

    说白了就是连接外部服务的,可以是http jms websocket .... 简单例子 代码 import ballerina/http; import ballerina/log; endpoin ...

  5. php基础语法（变量）

    PHP常用表现形式: 1.<?php .....这里是php代码 ?> 2.<? .....这里是php代码 ?> 此形式依赖于php.ini中的一项设置: short_ope ...

  6. 学习笔记：AJAX 跨域问题

    学习笔记:AJAX 跨域问题 AJAX 跨域是浏览器的问题. 只要 xhr 请求,不同的域名就会出现 AJAX 跨域问题. JSONP 是一要简单方式,但是有很多弊端,需要修改服务端代码. JSONP ...

  7. Linux 权限使用 777 真的好吗？

    Linux 权限使用 777 真的好吗? 开发环境当然不是问题,但是会造成一个习惯,到生产时也容易经常配置成 777. 777 权限可以让你的项目出现很大安全问题.1 linux 775和777权限有 ...

  8. ORM 查询

    ORM版学员管理系统 班级表 表结构 class Class(models.Model): id = models.AutoField(primary_key=True) # 主键 cname = m ...

  9. spring容器启动

    1 主要类 ContextLoaderListener:注册在web.xml中,web应用启动时,会创建它,并回调它的initWebApplicationContext()方法,从而创建并启动spri ...

  10. java 工作流

    BPM是jboss旗下遵守LGPL许可的java开源工作流,功能比较完善,从4.0开始引入了pvm的概念,支持jPDL.BPEL等流程定义语言.由于相关资料还比较少,开发自己的一个demo还不是太容易 ...