首页  >  文章  >  web前端  >  javascript实现的一个带下拉框功能的文本框_javascript技巧

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

WBOY
WBOY原创
2016-05-16 16:49:161494浏览

有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求。对于这种需求,大部分网站使用的都是一个下拉框和一个 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>


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn