今天做一个项目中用到很多select,但是产品经理让制定的select可以用户输入
首先想到的是1,用模拟select来实现
2,就是不常用的clip属性来实现
1,第一种很常用的就是模拟select
<div class="select_box"> <p><span class="select_input">请选择</span><span class="select_tip"></span></p> <ul class="select_ul" style="display:none"> <li>选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> </ul> </div> 如这些,加上一些点击的js效果就可以了
2,我主要想说的是用clip来剪切显示部分,隐藏部分用input tpye=“text” 来填补。
这样可以想想,select点击的三角形显示出来可以点击出来select的下拉菜单
如代码
<div class="my_select"> <select class="my_select_select" id="my_select_select01"> <option value="1_1" selected>1_1</option> <option value="1_2">1_2</option> <option value="1_3">1_3</option> </select> <input class="my_select_text" id="my_select_text01" /> </div> <div class="my_select"> <select class="my_select_select" id="my_select_select02"> <option value="1_1" selected>1_1</option> <option value="1_2">1_2</option> <option value="1_3">1_3</option> </select> <input class="my_select_text" id="my_select_text02" /> </div>
<style type="text/css"> .my_select { position:relative; margin:100px; font-size:12px; } .my_select_select { position:absolute; left:0; top:0; *top:1px; width:100px; clip:rect(0 auto auto 80px); height:22px; line-height:18px; } .my_select_text { width:80px; *height:16px; *line-height:16px; } </style>
<script type="text/javascript"> $(function(){ $(".my_select_select").change(function(){ var id = $(this).attr('id'); var num = id.substr(id.length - 2, 2); $("#my_select_text" + num).val($(this).val()); }); }); </script>
jquery中,主要是找到点击的当前的select然后把值赋给他的input
页面中有很多个这样的可输入的select的话,为了能找到当前所点击的
select,所以用到了01.02来定位。
相关推荐
jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化
input 结合div实现 select效果
select里实现checkbox选择和input里边实现上下一条;本人已经测试;兼容性没问题
兼容各种浏览器的input模拟SELECT,自己写的,比网上的好用,一个页面可重复使用
jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化
js select框美化用input文本框模拟select框美化特效,鼠标点击input框弹出选择二级菜单点击取值特效。
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
图片美化Select下拉框及Input文本框效果,select新样式,使用了htc文件,因此在兼容性方面,仅支持IE内核的浏览器,火狐、傲游可能有些问题。本美化效果包括3个表单元素: 1、select下拉按钮的新样式 2、文本框...
于是尝试了用input+select来实现,结果如下: 具体代码及演示地址:www.homdian.com/test.aspx 这种方法其实是在下拉框上压一个文本框,能够实现输入,也能够实现下拉框的选择。但根据输入值用用异步的方式绑定...
调用方式:$.divselect("#divselect","#inputselect"); "#divselect" 这是哪个模拟列表的盒子的ID,"#inputselect"这个是选择以后给 id="inputselect" 的input隐藏域赋值的哦。 懂一点程序的都明白为啥要赋值了。...
SelectInput.vue
1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...
用js的event可以用来阻止input,select,checkbox的默认事件,如 event.preventDefault() event.stopPropagation() ...以上所述是小编给大家介绍的使用css禁用input、checkbox、select等html控件实现disable
查询条件清空将input、select的值清空,下面有个不错的示例,需要的朋友可以了解下
NULL 博文链接:https://jgtang82.iteye.com/blog/266695
oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id=”‘m_num’+index” 注意m_num必须用单引号引起来 <input type=”number” :id=”‘m_num’+index” v-on:input=”jsMoney(index...
通过html元素层覆盖,实现一个可以输入,可以选择的一个select框,实际使用取值可以从text框中取值,如需从select框取值,请修改select的selectIndex以达到要求。
这个东西主要是对form里面的外观进行了美化,还有多附件上传功能的封装!
大致可分为input控件、textarea控件、select控件三大类。 select控件 textarea控件 表单控件 <input type="控件类型"/> 表单控件 属性 属性值 描述 type text 单行文本输入框 password 密码输入框 radio 单选按钮 ...