ホームページ >ウェブフロントエンド >jsチュートリアル >編集可能なドロップダウン ボックスを実装する 2 つの方法_JavaScript スキル
編集可能なドロップダウン ボックスを実装する 2 つの方法_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 16:44:561745ブラウズ
編集可能なドロップダウン ボックス - HTML
コードをコピー コードは次のとおりです。
< div style="position:relative;">
🎜>
編集可能なドロップダウン ボックス - JS
コードをコピーコードは次のとおりです。
title>/title>
| < select name=" fason"> |
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)
/*ドロップ変換対象のダウンボックス*/
}
/*初期化オブジェクト*/
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="rect(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;i
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*/