[[FrontPage]]

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

注意：あくまでも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などで必要とするものです、無くても動作します。


************************************************************************* [#u0280d56]
*************************************************************************/ [#h922cefa]

// 改定履歴
// Caracter Code :ShiftJIS 
// 2010/11/24 Ver0.01 新規作成

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////


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>
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS