HTMLでComboBoxのようなサンプル

入力可能な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のようなサンプル

contents

最新の20件