Kotak daftar drop-down pilih mendukung fungsi kueri fuzzy input, dan desainnya sangat ramah pengguna. Editor di bawah ini telah membagikan kode kunci dengan Anda. Anda dapat menambahkan dan memodifikasinya dengan tepat sesuai dengan kebutuhan Anda. Jika Anda memiliki pertanyaan, beri saya umpan balik.
Kode kuncinya adalah sebagai berikut:
<Html> <head> <meta http-equiv = 'konten-tipe' konten = 'teks/html; charset = GB2312 '> <Title> kotak drop-down yang dapat dimasukkan </iteme> </head> <body> <script language = "javaScript"> var j = 0; function selectValue (obj) {var input = obj.parentnode.nextSibling; document.all.box2.value = obj.options [obj.selectedIndex] .text; document.geteLementById ("txtsection"). value = obj.options [obj.selectedIndex] .value; alert (document.geteLementById ("txtsection"). value); } function inputValue (obj) {var n = 1; var tmpobj; var src = document.all.selectOption; var msg = document.all.msg; if (event.keycode! = 40 && event.keycode! = 38 && event.keycode! = 13) {if (obj.value! = "") {msg.style.display = ""; msg.innerhtml = ""; if (msg.haschildnodes ()) {msg.childnodes [0] .parentnode.removechild (msg.childnodes [0]); } untuk (var i = 0; i <src.length; i ++) {var selvalue = document.createElement ("div"); var seltext = document.createelement ("div"); seltext.value = src (i) .value; seltext.innerHtml = src (i) .text; if (src (i) .text.tolowercase (). indexOf (obj.value.tolowercase ()) == 0) {seltext.setAttribute ("id", "seltext"+n); selText.onMouseOver = function () {this.style.backgroundColor = '#003399'; this.style.color = '#ffffff'; } selText.onMouseout = function () {this.style.backgroundColor = '#ffffff'; this.style.color = '#000000'; } seltext.onClick = function () {document.all.box2.value = this.innerHtml; msg.style.display = "none"; document.geteLementById ("txtsection"). value = this.value; } msg.appendChild (seltext); n ++; }}} else {document.all.msg.style.display = "none"; }} else {// tekan tombol bawah if (event.keycode == 40) {j ++; untuk (var i = 0; i <src.length; i ++) {tmpoBj = document.getElementById ("selText"+i); if (tmpoBj! = null) {tmpoBj.style.backgroundColor = '#ffffff'; tmpobj.style.color = '#000000'; }} tmpoBj = document.getElementById ("seltext"+j); if (tmpoBj! = null) {tmpoBj.style.backgroundColor = '#0033399'; tmpobj.style.color = '#ffffff'; } else {j = 0; }} // tekan tombol up if (event.keycode == 38) {j--; untuk (var i = 0; i <src.length; i ++) {tmpoBj = document.getElementById ("selText"+i); if (tmpoBj! = null) {tmpoBj.style.backgroundColor = '#ffffff'; tmpobj.style.color = '#000000'; }} tmpoBj = document.getElementById ("seltext"+j); if (tmpoBj! = null) {tmpoBj.style.backgroundColor = '#0033399'; tmpobj.style.color = '#ffffff'; } else {j = 2; }} // tekan tombol enter if (event.keycode == 13) {tmpoBj = document.getElementById ("seltext"+j); document.all.box2.value = tmpobj.innerHtml; msg.style.display = "none"; document.geteLementById ("txtsection"). value = tmpobj.value; }}} function selmatch (src) {var currsel = document.all.box2.value; untuk (var i = 0; i <src.length; i ++) {if (src (i) .text == Currsel) {src.options (i) .delected = true; }}} function nomsg () {if (document.activeeLement.id == "msg") return false; else document.all.msg.style.display = 'none'; } </script> <Border Table = 0 CellPadding = 1 CellSpacing = 0> <tr> <td> <font face = "Arial" size = "2"> bagian </font> </td> <td colspan = 3> <Div style = "Posisi: relatif;"> <span gaya = "margin-lee: 230px; 22px; onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" > <OPTION value='ALL' Selected>ALL</OPTION> <OPTION value='0TEST1'>0TEST1 = Testing 1 <OPTION value='0TEST1'>0TEST2 = Testing 1 <OPTION value='0TEST1'>0TEST3 = Testing 1 <OPTION value = 'section'> bagian = Bagian Deskripsi xxxxx aaa </pection> </dect> </span> <input name = "box2" id = "box2" onkeyup = "inputValue (this)" onblur = "nomsg ()" onfocus = "this.select (); inputValue (ini)" nompox = "noMOCUS =" Ini "ms." Ukuran font: 14px; ruang putih: sekarang rap; overflow: tersembunyi; lebar: 230px; posisi: absolute; kiri: 0px; atas: 20px; tampilan: tidak ada "> </div> </div> </hidden> </tx> </txtsection" id = "txsection"Di atas adalah kode implementasi fungsi kueri fuzzy kotak drop-down terpilih yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!