This paper illustrates the method of JS implementation of select Drop-down box with input function. Share to everyone for your reference. The implementation methods are as follows:
Implementation method One
Copy Code code as follows:
<HTML>
<HEAD>
<meta http-equiv= ' content-type ' content= ' text/html; charset=gb2312 ' >
<TITLE>JS implementation of the Drop-down box 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 Mode Two
Copy Code code 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= "gets the selection 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 with your JavaScript programming.
