HTMLでComboBoxのようなサンプルの変更点

追加された行はこの色です。
削除された行はこの色です。
HTMLでComboBoxのようなサンプルへ行く。
HTMLでComboBoxのようなサンプルの差分を削除
[[FrontPage]]

入力可能なselectで、
Accsee等で見かけるComboBoxもどきのコントロールを作成しました。
prototype.jsを使用しています。

注意：あくまでもComboBoxもどきなので細かい部部の動作は本物と違います。

ご要望があれば、各種部品の作成も致しますのでご連絡を頂ければと思います。

【使用方法】

・prototype.jsファイルと本ファイルをHTMLファイルに以下を参考にして組み込んでください。 
 	<script src="js/prototype.js" type="text/javascript"></script>
 	<script src="js/combobox.js" type="text/javascript"></script>

・初期化
 	呼び出し位置はheadタグ内で以下の様に記述します。
 	<script type="text/javascript">
 	<!--
 		window.onload = function (){
 			comboInit('pulldownList', 'pulldownText');
 		}
 	-->
 	</script>
	
	
・HTMLのサンプルコード	
 	  <div name="ComboBox">
 	    <select id="pulldownList" name="pulldownList" >
 	      <option>　</option>
 	      <option>0aaaaaaaaaaaaaaaaaaaaa</option>
 	      <option>1aaaaaaaaaaaaaaaaaaaaa</option>
 	      <option>2aaaaaaaaaaaaaaaaaaaaa</option>
 	      <option>3aaaaaaaaaaaaaaaaaaaaa</option>
    	</select>
        <input type="text" id="pulldownText" name="pulldownText" >
 	  </div>
	
 ・動作ブラウザ
	IE8、FF、クロム等
	
 ・補足事項
	name属性はpirkaまたCGIなどで必要とするものです、無くても動作します。
 
・JavaScriptコード
 
 var pulldownText=null;
 //////////////////////////////////////////////////////
 //　プルダウン押下ボタンを押したときの処理
 function pulldownChangeEvent(e) {
 
 	var obj = Event.element(e);
 	$(pulldownText).value = obj.options[obj.selectedIndex].text;
 }
 
 //////////////////////////////////////////////////////
 //　ComboBox初期化
 function comboInit(selectID, textID) {
 
 	var pulldownHeight = 20;
 	var pulldownTextWidth = 100;
 	var pulldownBtnWidth = 17;
 
 	pulldownText = textID;
 	var list = $(selectID).absolutize();
	var text = $(textID).absolutize();
 
	// set list attr 
	list.style.height = pulldownHeight+'px';
	list.style.width = (pulldownTextWidth+pulldownBtnWidth)+'px';
	var tx = parseInt(list.style.width+0);
	var ty = parseInt(list.style.height+0);
	// set text attr 
	text.style.position = 'absolute';
	text.style.left = list.style.left;
	text.style.top = list.style.top;
	text.style.width = (tx-pulldownBtnWidth)+'px';
	text.style.height = list.style.height;
	text.value = list.options[0].text;
 	
 	Event.observe($(selectID), "change", pulldownChangeEvent, false);
 }

実際のHTMLです

 <html>
 <head>
 <script type="text/javascript" src="/js/prototype.js"></script>
 <script type="text/javascript" src="/js/pirka.js"></script>
 <script type="text/javascript" src="/js/combobox.js"></script>
 <script type="text/javascript" >
 <!-- 
 //　起動時の初期化
 window.onload = function (){
 	comboInit('pulldownList', 'pulldownText');
 }
 -->
 </script>
 <style type="text/css">
 </style>
 <title>サンプル　コンボボックスコントロール</title>
 </head>
 <body>
 <center>
 <form>
 <table>
   <tr>
    <td>
      <br>
      <br>
    </td>
    <td>
      <div name="ComboBox">
	    <select id="pulldownList" name="pulldownList" >
	      <option></option>
	      <option>0aaaaaaaaaaaaaaaaaaaaa</option>
	      <option>1aaaaaaaaaaaaaaaaaaaaa</option>
	      <option>2aaaaaaaaaaaaaaaaaaaaa</option>
	      <option>3aaaaaaaaaaaaaaaaaaaaa</option>
    	</select>
        <input type="text" id="pulldownText" name="pulldownText" >
	  </div>
    </td>
  </tr>
  <tr>
  	<td>
  	  <br>
  	</td>
  </tr>
 </table>
 </form>
 </center>
 </body>
 </html>
HTMLでComboBoxのようなサンプル の変更点

HTMLでComboBoxのようなサンプルの変更点
