편집 가능한 드롭 다운 상자 -HTML
코드 사본은 다음과 같습니다.
<div style = "위치 : 상대;">
<onchange = "document.getElementById ( 'input'). value = this.value">를 선택하십시오
<옵션 값 = "클래스 A"> 클래스 A </옵션>
<옵션 값 = "클래스 B"> 클래스 B </옵션>
<옵션 값 = "클래스 C"> 클래스 C </옵션>
<옵션 값 = "클래스 D"> 클래스 D </옵션>
</선택>
<입력 ID = "입력"이름 = "입력"스타일 = "위치 : 절대; 너비 : 99px; 높이 : 16px; 왼쪽 : 1px; 상단 : 2px; 경계-바닥 : 0px; 경계-권리; 경계-left : 0px; Border-Top : 0px;">
</div>
편집 가능한 드롭 다운 박스 JS
코드 사본은 다음과 같습니다.
<html>
<헤드>
<meta name = "Generator"Content = "Microsoft FrontPage 5.0">
<meta name = "progid"content = "FrontPage.editor.document">
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
<title> 편집 가능한 드롭 다운 박스 </title>
</head>
<body>
<테이블 스타일 = "테두리 : 2px 시작; 배경색 :#d2e8ff"align = "center">
<tr>
<td align = "center">
<select name = "fason">
<옵션 값 = "편집 가능한 드롭 다운 박스"> 편집 가능한 드롭 다운 상자 </옵션>
<옵션 값 = "저자"> 저자 </옵션>
</선택>
</td>
</tr>
</테이블>
<script language = "javaScript">
함수 combox (obj, select) {
this.obj = obj
this.name = select;
this.select = document.getElementsByName (select) [0];
/*변환 할 드롭 다운 상자*/
}
/*개체 초기화*/
combox.prototype.init = function () {
var inputbox = "<input name = 'combox _"+this.name+"'onchange = '"+this.obj+". find ()'" "
inputbox+= "style = '위치 : 절대; 너비 :"+(this.select.offsetwidth-16)+"; 높이 :"+this.select.offsetheight+"; 왼쪽 :"+getl (this.select)+"; 상단 :"+gett (this.select)+"'>."
document.write (입력 상자)
with (this.select.style) {
left = getl (this.select)
top = gett (this.select)
위치 = "절대"
clip = "rect (0"+(this.select.offsetwidth)+""+this.select.offsetheight+""+(this.select.offsetwidth-18)+")" ")" "
/*컷 풀다운 상자*/
}
this.select.onchange = 새 함수 (this.obj+". Change ()")
this.change ()
}
/*초기화 종료*/
//////////// 객체 이벤트 정의 /////////
combox.prototype.find = function () {
/*입력 상자의 값을 검색하면 드롭 다운 상자가 자동으로 배치됩니다*/
var inputbox = document.getElementsByName ( "combox _"+this.name) [0]
with (this.select) {
for (i = 0; i <옵션 .length; i ++)
if (옵션 [i] .text.indexof (inputbox.value) == 0) {
selectedIndex = i
this.change ();
부서지다;
}
}
}
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 ()};
}
////////////////////////////////4
/*공통 위치 지정 기능 (제어의 절대 좌표 얻기)*/
함수 getl (e) {
var l = E.OffSetLeft;
while (e = e.offsetparent) l+= e.offsetleft;
리턴 l
}
함수 gett (e) {
var t = E.OffSetTop;
while (e = e.offsetparent) t+= e.offsettop;
반환 t
}
/*마치다*/
</스크립트>
<script language = "javaScript">
var a = 새로운 combox ( "a", "fason")
a.init ()
</스크립트>
</body>
</html>