ＣＤ、ＬＰ管理と音楽のデータベース・システム　RecLib: Select　Option の代替品（５）

<!--

・サンプルの Html ファイル

（１）適当なテキストエディタにコピペして適当なフォルダに保存し、

（２）ブラウザからファイルとして開いてください。

Firefox ならば、【ファイル】【ファイルを開く】とすれば開くことができます。Chtome, Edge にはそのようなメニュー等はないようです。アドレスバーにファイルの URL を直接入力すれば開く事ができます。入力する URL は「file:///C:/ ファイルのパス名」などとします。

【送信】ボタンをクリックするとパラメータを送出し、自分自身を呼び出します。通常、送信先のＵＲＬを指定してから送信しますが、このテストページではＵＲＬは指定していない（自分自身なので）ので、保存する時のファイル名はどのような名前でもかまいませんが、拡張子は「.html」とするのが無難でしょう。ブラウザが「html ファイルではない」と誤解するとまずいので。
以下のサンプルは

・コメントは削除してあります。ブログ入力ソフトが「通常の文書」として処理する過程で余分なスペースや、時には改行などを削除したりするので、必用な行の先頭に「//」があるかに見える場合があるからです。

・私の環境では動作していますが、動作を保証するものではありません。念のため。

・動かなかったり、変な動きをした場合には動作環境を明示してコメントを頂けると幸いです。もっとも、私が同じような環境でテストできるか、は別問題ですが。

-->

<html><Head> <meta contentType="text/html"; charset="utf-8"; pageEncoding="utf-8"> <Title><select><option> の代替品のテスト</Title></Head>
<Body onLoad="onLoadFunction()"><Form name="TEST" method="get"><p><select><option> の代替品のテスト</p><BR><BR><span style="outline:solid thin;width:150px;" id="MySel0" onClick="dispMyOption('MySel0','MySelT0','MyOpt0','MyUl0','17')"><input type="text" readonly style="cursor:default;outline:none;border:none;width:135px;height:40px;" id="MySelT0" value=""><input type="text" readonly style="cursor:default;outline:none;border:none;text-align:right;width:15px;height:40px;" value="v " class="aH"></span><input type="hidden" name="TestParam" value="">
<div id="MyOpt0" style="display:none;position:fixed;border:1px solid #000;background-color:#fff;"><ul style="list-style:none;padding-left:0;padding-top:0;margin-top:0;padding-bottom:0;margin-bottom:0;overflow-y:auto;" id="MyUl0">
<li onMouseOut="onMouseOutFunction('MySel0',this,'0');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','222','アイルランド','0','TestParam')">アイルランド</li><li onMouseOut="onMouseOutFunction('MySel0',this,'1');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','278','アメリカ','1','TestParam')">アメリカ</li><li onMouseOut="onMouseOutFunction('MySel0',this,'2');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','242','イギリス','2','TestParam')">イギリス</li><li onMouseOut="onMouseOutFunction('MySel0',this,'3');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','223','イタリア','3','TestParam')">イタリア</li><li onMouseOut="onMouseOutFunction('MySel0',this,'4');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','207','オーストリア','4','TestParam')">オーストリア</li><li onMouseOut="onMouseOutFunction('MySel0',this,'5');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','230','オランダ','5','TestParam')">オランダ</li><li onMouseOut="onMouseOutFunction('MySel0',this,'6');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','218','ギリシャ','6','TestParam')">ギリシャ</li><li onMouseOut="onMouseOutFunction('MySel0',this,'7');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','238','スペイン','7','TestParam')">スペイン</li><li onMouseOut="onMouseOutFunction('MySel0',this,'8');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','212','チェコ','8','TestParam')">チェコ</li><li onMouseOut="onMouseOutFunction('MySel0',this,'9');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','213','デンマーク','9','TestParam')">デンマーク</li><li onMouseOut="onMouseOutFunction('MySel0',this,'10');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','217','ドイツ','10','TestParam')">ドイツ</li><li onMouseOut="onMouseOutFunction('MySel0',this,'11');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','113','日本','11','TestParam')">日本</li><li onMouseOut="onMouseOutFunction('MySel0',this,'12');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','231','ノルウェー','12','TestParam')">ノルウェー</li><li onMouseOut="onMouseOutFunction('MySel0',this,'13');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','220','ハンガリー','13','TestParam')">ハンガリー</li><li onMouseOut="onMouseOutFunction('MySel0',this,'14');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','216','フランス','14','TestParam')">フランス</li><li onMouseOut="onMouseOutFunction('MySel0',this,'15');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','208','ベルギー','15','TestParam')">ベルギー</li><li onMouseOut="onMouseOutFunction('MySel0',this,'16');" onMouseOver="this.style.background='lightskyblue';" style="text-align:left;padding-left:20;padding-top:10;padding-bottom:10;" onClick="setValue('MySel0','MySelT0','MyOpt0','232','ポーランド','16','TestParam')">ポーランド</li></ul></div><BR><BR><input type="button" style=\"-webkit-appearance:none;height:40px;\" value="送信" onClick="reload()"></Form><script language="JavaScript">var selectedCode = '';var codeIDList = [ [222, 'アイルランド'], [278, 'アメリカ'], [242, 'イギリス'], [223, 'イタリア'], [207, 'オーストリア'], [230, 'オランダ'], [218, 'ギリシャ'], [238, 'スペイン'], [212, 'チェコ'], [213, 'デンマーク'], [217, 'ドイツ'], [113, '日本'], [231, 'ノルウェー'], [220, 'ハンガリー'], [216, 'フランス'], [208, 'ベルギー'], [232, 'ポーランド'] ];var initialSelection = -1;
function onLoadFunction(){ document.addEventListener('auxclick', closeMyOption, {capture:true}); document.addEventListener('scroll', closeMyOption, {capture:true}); document.addEventListener('keydown', closeMyOption, {capture:true}); document.addEventListener('mousedown', mouseDownHandler, {capture:true}); var urlStr = document.location.search; initialSelection = -1; if((urlStr != null) && (urlStr.length != 0)){ var eqPos = document.location.search.indexOf('='); selectedCode = urlStr.substring(eqPos + 1); if(selectedCode != ''){ for(var i=0; i<codeIDList.length; i++){ if(codeIDList[i][0] == selectedCode){ initialSelection = i; var mySelectElement = document.getElementById('MySelT0'); mySelectElement.value = codeIDList[i][1]; break; } } } }}
var activeMySelect=null;var activeMyOption=null;var selectedItems=null;var normalHeight=20;
function dispMyOption(mySelectID, mySelectTextID, myOptionID, myUlID, numOptions){ var myOptionElement = document.getElementById(myOptionID); var ulElement = document.getElementById(myUlID); if(activeMyOption != null){ myOptionElement.style.display='none'; activeMyOption=null; activeMySelect=null; return; } var selectedNo = -2; if(selectedItems == null){ selectedItems = new Array(0); } for(var i=0; i<selectedItems.length; i++){ if(selectedItems[i][0] == mySelectID){ selectedNo = selectedItems[i][1]; break; } } if(selectedNo == -2){ selectedNo = initialSelection; var workArray = new Array(2); workArray[0] = mySelectID; workArray[1] = selectedNo; selectedItems.push(workArray); } var optionRows = ulElement.children;
for(var i=0; i<optionRows.length; i++){ optionRows[i].style.backgroundColor=''; } if(selectedNo != -1){ var selectedRow = optionRows[selectedNo]; selectedRow.style.backgroundColor='aquamarine'; } var mySelectTextElement = document.getElementById(mySelectTextID); var mySelectTextRect = mySelectTextElement.getBoundingClientRect(); var mySelectElement = document.getElementById(mySelectID); var mySelectRect = mySelectElement.getBoundingClientRect(); var mySelectTop = mySelectTextRect.top; var mySelectBottom = mySelectTextRect.bottom; var mySelectLeft = mySelectRect.left; var mySelectWidth = mySelectRect.width; var myOptionLiHeight=normalHeight + 20; var myOptionTotlaHeight=myOptionLiHeight * numOptions; var windowHeight=window.innerHeight; var upperMatgin=mySelectTop; var lowerMargin=windowHeight-mySelectBottom; var dispAbove=false; var numRows = 0; if((upperMatgin < myOptionTotlaHeight) && (lowerMargin < myOptionTotlaHeight)){ dispAbove = lowerMargin < upperMatgin; var margine; if(dispAbove){ margin = upperMatgin; }else{ margin = lowerMargin; } numRows = Math.floor(margin / myOptionLiHeight); myOptionTotlaHeight = myOptionLiHeight * numRows; }else{ dispAbove = lowerMargin < myOptionTotlaHeight; } ulElement.style.height = myOptionTotlaHeight; ulElement.style.width = mySelectWidth; if(dispAbove){ myOptionElement.style.top = mySelectTop - myOptionTotlaHeight; }else{ myOptionElement.style.top = mySelectBottom; } myOptionElement.style.left = mySelectLeft; var listElement=document.getElementById(myOptionID); listElement.style.display='block'; for(var i=0; i<optionRows.length; i++){ optionRows[i].style.height=normalHeight; } var scrollRows = 0; if(selectedNo != 0){ var maxScrollRows = numOptions - numRows; var scrollOffset = Math.floor(numRows / 2); scrollRows = selectedNo - scrollOffset; if(scrollRows < 0){ scrollRows = 0; }else{ if(maxScrollRows < scrollRows){ scrollRows = maxScrollRows; } } } ulElement.scrollTop=scrollRows * myOptionLiHeight; activeMyOption=myOptionID; activeMySelect=mySelectID;}
function mouseDownHandler(e){ if(activeMyOption == null){ return; } var mySelector='#' + activeMySelect; if(e.target.closest(mySelector) != null){ return; } closeMyOption(e);}
function closeMyOption(e){ if(activeMyOption == null){ return; } var eventType=e.toString(); if(eventType.indexOf('KeyboardEvent') != -1){ var keyCode=e.key; if((keyCode != 'Escape') &&(keyCode != 'OS') &&(keyCode != 'F10') &&(keyCode != 'Tab') && (keyCode != 'Enter')){ return; } } var targetObjType = e.target.toString(); var posEllement=targetObjType.indexOf('Element'); var closeIt=false; if(posEllement == -1){ closeIt = true; }else{ 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;}
function setValue(mySelectID, mySelectTextID, myOptionID, codeID, caption, rowNo, htmlParamName){ var mySelectElement = document.getElementById(mySelectTextID); var myOptionElement=document.getElementById(myOptionID); mySelectElement.value=caption; var hiddenElements = document.getElementsByName(htmlParamName); hiddenElements[0].value=codeID; for(var i=0; i<selectedItems.length; i++){ if(selectedItems[i][0] == mySelectID){ selectedItems[i][1] = rowNo; break; } } myOptionElement.style.display='none'; activeMyOption=null; activeMySelect=null;}
function onMouseOutFunction(MySelID, liElement, rowNo){ for(var i=0; i<selectedItems.length; i++){ if(MySelID == selectedItems[i][0]){ if(rowNo == selectedItems[i][1]){ liElement.style.background='aquamarine'; }else{ liElement.style.background=''; } return; } }}function reload(){ document.TEST.submit();}</script></BODY></HTML>

ＣＤ、ＬＰ管理と音楽のデータベース・システム　RecLib

ＣＤ、ＬＰ管理と音楽のデータベース・システム

プロフィール

アクセスランキング

アーカイブ

カテゴリ

2021年11月 5日 (金)

Select　Option の代替品（５）

コメント

コメントを投稿

ＣＤ、ＬＰ管理と音楽のデータベース・システム RecLib