Select Option の代替品（４）
・JavaScript その２
/* マウスボタンが押下された時のイベントハンドラ
オプションリストが非表示ならば何もしない。表示中であっても MySelect 上で押下された場合は何もしない。
そうでなければ、オプションリストを非表示とする。
マウスイベントは mouseDown --> mouseUp --> click の順に発生するので、MySelect 上で押下された時にオプションリストを閉じると、直後に発生するMySelect onClick で再び開いてしまいます。
これを避けるために、ここでは非表示とはせず、MySelect click のハンドラでオプションリストが開いていたら閉じる、としました。
function mouseDownHandler(e){
if(activeMyOption == null){ // オプションリストが開いていない時は
return; // 何もしない。
}
var mySelector='#' + activeMySelect;
if(e.target.closest(mySelector) != null){ // MySelect 上で押下
return; // された場合も、何もしない。
}
closeMyOption(e); // オプションリストを閉じる。
}
// オプションリストを閉じる
function closeMyOption(e){
if(activeMyOption == null){ // オプションリストが開いていない場合は
return; // 何もしない
}
var eventType=e.toString(); // イベント種別を得る
if(eventType.indexOf('KeyboardEvent') != -1){ // キーボードイベントならば
var keyCode=e.key; // 押されたキーのコードを得る。
// 閉じるのは【エスケープキー】【Windows キー】【F10 キー】【Enter キー】そする。
if((keyCode != 'Escape') &&(keyCode != 'OS') &&(keyCode != 'F10') &&(keyCode != 'Tab') && (keyCode != 'Enter')){
return; // いずれのキーでもないので、これで終わり。
}
}
/* イベント発生源を得る。どのエレメントの上でもない位置で押下される場合があるから。エレメント上で押下された場合は、発生源が 'XxxElement' となるので、これで判断する。エレメントでない発生源に対して e.target.closest() を行うとエラーとなる
*/
var targetObjType = e.target.toString(); // 発生源を得る
var posEllement=targetObjType.indexOf('Element'); // 文字列 'Element' の位置を得る。
var closeIt=false; // true:オプションリストを閉じる
if(posEllement == -1){ // 発生源が 'xxxElement' でない場合は
closeIt = true; // オプションリストを閉じる
}else{ // 発生源が xxxElement の場合は
// オプションリストの上で押下された場合は閉じてはならない。オプションリスト上かを調べる。
var mySelector='#' + activeMyOption;
closeIt = e.target.closest(mySelector) == null; // オプションリスト上ではない
}
if(!closeIt){ // 「閉じるべき」でないならば
return; // 何もしない。
}
// オプションリストのエレメントを得て非表示とする。
var myOptionElement=document.getElementById(activeMyOption);
myOptionElement.style.display='none';
activeMyOption=null; activeMySelect=null;
}
// オプションリストの行がクリックされた。必用な値を MySelect にセットしてオプションリストを閉じる
function setValue(mySelectID, mySelectTextID, myOptionID, codeID, caption, rowNo, htmlParamName){
var mySelectElement = document.getElementById(mySelectTextID); // セット対象の mySelect
var myOptionElement=document.getElementById(myOptionID); // 閉じるべきリストの id
mySelectElement.value=caption; // MySelect にキャプションを表示
var hiddenElements = document.getElementsByName(htmlParamName); // hidden を取り出し
hiddenElements[0].value=codeID; // value をセットする。
for(var i=0; i<selectedItems.length; i++){ // MySelect ごとの「現在の選択行」を書き換える。
if(selectedItems[i][0] == mySelectID){
selectedItems[i][1] = rowNo;
break;
}
}
myOptionElement.style.display='none'; // オプションリストを非表示とする。
activeMyOption=null;
activeMySelect=null;
}
/* <li> の行からマウスが外れた時の処理
既に選択されている行と、今マウスが乗っている行とでは背景色を変えている。 マウスが去った時、背景色を「選択されていない」色にするか「すでに選択されている」色にするかを判断する必要がある。*/
function onMouseOutFunction(MySelID, liElement, rowNo){
for(var i=0; i<selectedItems.length; i++){
if(MySelID == selectedItems[i][0]){ // この MySelect の現在の選択行を取り出し
if(rowNo == selectedItems[i][1]){ // 選択された行ならば
liElement.style.background='aquamarine'; // 「選択されている」色に
}else{ // そうでなければ
liElement.style.background=''; // 背景色なしにセットする。
}
return;
}
}
}
// 【送信】ボタンがクリックされた時の処理
function reload(){
document.TEST.submit(); // 単に送信する。
}
</script>
次回はサンプルの Html ファイルの予定です、
コメント