首页 > web前端 > js教程 > 正文

javascript实现的一个带下拉框功能的文本框_javascript技巧

WBOY
发布: 2016-05-16 16:49:16
原创
1497 人浏览过

有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求。对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择。那么,我们希望它看上去像一个可以输入也可以选择的下拉框,那该如何做呢?

其实我们可以通过 css position 定位及少许的 javascript 代码,模拟出来这种效果。

复制代码 代码如下:




 可编辑可选择的下拉框
 
 


 

    
    
 

 <script><BR> var listName = document.getElementById('list-name-for-select');<BR> var listSelect = document.getElementById('list-select').onchange = function(e){<BR> console.log(this)<BR> if(this.value){<BR> listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;<BR> }else{<BR> listName.value = ''<BR> }<BR> };<BR> </script>


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板