可文本输入的下拉框select_el-select可输入资源-CSDN文库

共2个文件

js：1个

html：1个

select

4星 · 超过85%的资源需积分: 50 96 浏览量 2013-06-20 23:00:58 上传评论收藏 28KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

.zip （2个子文件）

可文本输入的下拉框

jquery-1.4.4.min.js 77KB

demo.html 2KB

<html> <head> <style type="text/css"> .div_select { position: relative; margin: 100px; font-size: 12px; } .select_combine { position: absolute; left: 0; top: 1px; width: 100px; clip: rect(0, auto, auto, 80px); line-height: 18px; } .text_combine { width: 80px; height: 20px; line-height: 18px; } select{ left:-2px; top:-2px; font-size:12px; width:183px; line-height:18px; border:0px; color:#909993; } </style> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> //支持多个这样的可输入的select，为了能找到当前所点击的select，所以用到了01，02来定位 $(function(){ $(".select_combine").change(function(){ var id = $(this).attr('id'); var num = id.substr(id.length - 2, 2); $("#my_select_text" + num).val($(this).val()); }); }); </script> </head> <body> <form> <table width="80%" align="center"> <tr> <td>普通的select：</td> <td><select name="remark1"> <option value="" selected>请选择</option> <option value="测试一" >测试一</option> <option value="测试二">测试二</option> <option value="测试三">测试三</option> </select> </td> <td>可同时文本输入的select：</td> <td> <div class="div_select"> <select class="select_combine" id="my_select_select01" name="remark"> <option value="" selected>请选择</option> <option value="测试一" >测试一</option> <option value="测试二">测试二</option> <option value="测试三">测试三</option> </select>  <input class="text_combine" id="my_select_text01" name="remark2"/> </div> </td> </tr> </table> </form> </body> </html>

评论收藏

内容反馈