편집 가능한 드롭다운 상자_javascript 기술을 구현하는 2가지 방법

편집 가능한 드롭다운 상자 - HTML

코드 복사 코드는 다음과 같습니다.

< div style=" position:relative;">
옵션 값=" 클래스 A">클래스 A
<옵션 값="클래스 B">클래스 B
<옵션 값="클래스 C"> C< ;/option>
D class

🎜>

편집 가능한 드롭다운 상자-JS

코드 복사 코드는 다음과 같습니다.

< 메타 이름=" ProgId" content="FrontPage.Editor.Document">
제목

< select name=" fason">
Editable drop-down box
저자

function 콤보x(obj ,select){
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)[0]/*드롭- 변환할 다운 상자*/
}
/*초기화 객체*/
combox.prototype.init=function(){
var inputbox="inputbox ="style='position:absolute;width:" (this.select.offsetWidth-16) ";height:" this.select .offsetHeight ";left:" getL(this.select) ";top:" getT(this.select) "'>"
document.write(inputbox)
with(this.select.style){
left=getL( this.select)
top=getT(this.select)
position="absolute"
clip="ect(0 " (this.select.offsetWidth) " " this .select.offsetHeight " " ( this.select.offsetWidth-18) ")"
/*드롭다운 상자 잘라내기*/
}
this.select.onchange=new Function(this.obj " .change()")
this.change()

}
/*초기화 끝*/

////////객체 이벤트 정의// /////
combox.prototype.find=function(){
/*입력 상자의 값을 검색하면 드롭다운 상자가 자동으로 배치됩니다.*/
var inputbox=document .getElementsByName("combox_" this.name)[0]
with(this.select){
for(i=0;iif(options[i]. text.indexOf(inputbox.value)==0){
selectedIndex=i
this.change()
break
}
}

combox.prototype.change=function(){
/ *드롭다운 상자의 onchange 이벤트 정의*/
var inputbox=document.getElementsByName("combox_" this.name)[0]
inputbox.value=this.select.options[this.select.selectedIndex].text ;
with(inputbox){select();focus()}
}
////// //객체 이벤트 종료///////
/*공개 위치 지정 함수(컨트롤의 절대 좌표 가져오기)*/
function getL(e){
var l=e.offsetLeft ;
while(e=e.offsetParent)l =e.offsetLeft;
return l
}
function getT(e){
var t=e.offsetTop
(e=e.offsetParent)t =e.offsetTop;
return t
}
/*End*/
;
var a=new 콤보x("a","fason")
a.init()