效果体验：http://hovertree.com/texiao/js/20/
或者扫描二维码在手机体验：
点击选择城市后，在弹出的层中的输入框，输入英文字母 h,会有HoverTree和Hewenqi两个选项，可以点击要输入的项。
源码下载：http://hovertree.com/h/bjaf/95ese8s1.htm
欢迎关注微信公众号 何问起，账号: ihewenqi
或者微信扫描下面二维码关注：
代码如下：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>JS点击弹出模态窗口下拉列表特效 - 何问起</title> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/20/css/demo.css"> <style> * { padding: 0; margin: 0; } .content { margin: 50px auto 0; width: 300px; min-height: 500px; } .form-group { width: 100%; float: left; margin: 5px 0; } label { margin-bottom: 10px; float: left; } .field-input, select { width: calc(100% - 20px); float: left; padding: 10px; font-family: inherit; } </style> <!--必要样式--> <link rel="stylesheet" href="http://hovertree.com/texiao/js/20/css/pickout.css"> </head> <body> <div class="container"> <div class="content"> <form action="#" method="post"> <div class="form-group"> <label for="name">姓名:</label> <input type="text" name="name" id="name" class="field-input" placeholder="何问起"> </div> <div class="form-group"> <label for="city">城市:</label> <select name="city" id="city" class="city pickout" placeholder="选择一个城市"> <option data-icon="♠" value="bj">北京</option> <option data-icon="♣" value="sh">上海</option> <option data-icon="♥" value="gz">广州</option> <option selected data-icon="♦" value="sz">深圳</option> <option data-icon="☺" value="xg">香港</option> <option data-icon="♀" value="sjz">石家庄</option> <option data-icon="♂" value="cd">成都</option> <option data-icon="★" value="ht">HoverTree</option> <option data-icon="◆" value="ht">Hewenqi</option> </select> </div> <div class="form-group"> <label for="name2">昵称:</label> <input type="text" name="name2" id="name2" class="field-input" placeholder="柯乐义"> </div> <div class="form-group"> <label for="state">职位:</label> <select name="state" id="state" class="state pickout" placeholder="选择一个职位"> <option value="pe">项目经理</option> <option value="pb">工程师</option> <option value="ba">培训师</option> <option value="sp">项目策划</option> <option value="qd">前端开发</option> </select> </div> </form> </div> </div> <script src="http://hovertree.com/texiao/js/20/js/pickout.js"></script> <script> // Preparar o select //pickout.to('.pickout'); pickout.to({ el: '.city', theme: 'dark', search: true }); pickout.to({ el: '.state', theme: 'clean', }); // automaticamente pickout.updated('.city'); </script> </body> </html>