Home > Developer > JavaScript
Js implements the Select drop-down box with the input function, select drop-down box
This example describes how to implement the Select drop-down box with the input function in js. Share it with you for your reference. The specific implementation method is as follows:
Method 1
Copy codeThe Code is as follows: <HTML>
<HEAD>
<META http-equiv = 'content-type' Content = 'text/html; charset = gb2312 '>
<TITLE> JavaScript implementation drop-down box that can be entered </TITLE>
</HEAD>
<BODY>
<Div style = "position: relative;">
<Span style = "margin-left: 100px; width: 18px; overflow: hidden;">
<Select style = "width: 118px; margin-left:-100px" onchange = "this. parentNode. nextSibling. value = this. value">
<Option value = "Germany"> Germany </option>
<Option value = "Norway"> Norway </option>
<Option value = "Switzerland"> Switzerland </option>
</Select> </span> <input name = "box" style = "width: 100px; position: absolute; left: 0px;">
</Div>
</BODY>
</HTML>
Implementation Method 2
Copy codeThe Code is as follows: <select id = "select" onkeydown = "Select. del (this, event)" onkeypress = "Select. write (this, event)">
<Option value = ""> </option>
<Option value = "aaa"> aaa </option>
<Option value = "bbb"> bbb </option>
<Option value = "ccc"> ccc </option>
</Select>
<Input type = "button" value = "get selected value" id = "test" onclick = "test ();"/>
<Script>
Var Select = {
Del: function (obj, e ){
If (e. keyCode | e. which | e. charCode) = 8 ){
Var opt = obj. options [0];
Opt. text = opt. value = opt. value. substring (0, opt. value. length> 0? Opt. value. length-1: 0 );
}
},
Write: function (obj, e ){
If (e. keyCode | e. which | e. charCode) = 8) return;
Var opt = obj. options [0];
Opt. selected = "selected ";
Opt. text = opt. value + = String. fromCharCode (e. charCode | e. which | e. keyCode );
}
}
Function test (){
Alert (document. getElementById ("select"). value );
}
</Script> <br/>
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
