Html:
<id= "Inputmodel"/> <name = "Enginemodel" size= "Ten" style= "height:auto; margin-left:120px; Position:absolute; Display:none; " ></ Select >
Jquery:
//Get Select varEngine = $ (' select[name= ' Enginemodel "] ');//page load, initial assignment select option for(varIinchengines) {Engine.append (' <option> ' + engines[i] + ' </option> '); } //bind value to select (can be used to modify) if(' <%=order. Enginemodel%> ') {Engine.val (' <%=order. Enginemodel%> '); }//Select 's Change event, the selected value is assigned to input$ (' input[name= ' Enginemodel "]). Change (function() {document.getElementById (' Inputmodel '). Value = document.getElementById (' Selectmodel '). Options[document.getelementbyid (' SelectModel ')). Selectedindex].value; })//Editable Select specific implementations varFocus =false; $("#inputModel"). Focus (function() {Focus=true; $( This). Next (). CSS (' Display ', ' block '); }). blur (function () { if(Focus) {$ ( This). Next (). CSS (' Display ', ' none '); }}). KeyUp (function () { varQuerycondition = $ ("#inputModel"). Val (). toLowerCase (); if(Querycondition.length! = 0) {engine.empty (); for(varIinchengines) { if(Engines[i].tolowercase (). INDEXOF (querycondition)! =-1) {engine.append (' <option> ' + engines[i] + ' </option> '); } } } Else { for(varIinchengines) {Engine.append (' <option> ' + engines[i] + ' </option> '); }}). Next (). MouseDown (function() {Focus=false; }). Change (function () { $( This). CSS (' Display ', ' none '). Prev (). Val ( This. Value); });
jquery implements an editable drop-down box (input + Select)