>  기사  >  웹 프론트엔드  >  편집 가능한 드롭다운 상자_javascript 기술을 구현하는 2가지 방법

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

WBOY
WBOY원래의
2016-05-16 16:44:561723검색

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

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

< div style=" position:relative;">

🎜>



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




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





< select name=" fason">

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()






성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:javascript_javascript 팁에서 주석문을 제거하는 정규식다음 기사:javascript_javascript 팁에서 주석문을 제거하는 정규식

관련 기사

더보기