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

WBOY
Lepaskan: 2016-05-16 16:49:16
asal
1499 orang telah melayarinya

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


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan