search

Home >Web Front-end >JS Tutorial >A text box with drop-down box function implemented in javascript_javascript skills

A text box with drop-down box function implemented in javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:49:161522browse

Sometimes we need an optional drop-down box to select content, but there is also a need to customize the input. For this requirement, most websites use a drop-down box and an input text to provide choices in parallel or in separate rows. So, we want it to look like a drop-down box that can be entered or selected, so how to do it?

In fact, we can simulate this effect through css position positioning and a little javascript code.

Copy code The code is as follows:




 可编辑可选择的下拉框
 
 


 

    
    
 

 <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>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed introduction to Javascript unit testing framework QUnitjs_javascript skillsNext article：Detailed introduction to Javascript unit testing framework QUnitjs_javascript skills

Related articles

See more