編集可能なテキストを設定する（セレクトメニューで選択）

書式

editObj = new Ajax.InPlaceCollectionEditor(elementName, url, options)

editObj : 編集可能テキストオブジェクト
element : フォーム上のエレメント
url : CGI等のURL
options : オプション【省略可能】
　collection : メニューに表示する項目リスト（配列）

説明

　編集可能なテキストで、セレクトメニューで項目を選択するように設定するにはAjax.InPlaceCollectionEditor()を使います。最初のパラメータにはフォーム上のエレメントを指定します。2番目のパラメータはURLでデータを保存する、結果を返すためのCGIプログラム等を指定します。3番目のパラメータはオプションで各種指定を行うことができます。3番目のオプションでcollectionに配列を指定することでセレクトメニューが表示されます。サーバーに送信する項目の値（optionタグのvalue属性）を指定するにはcollection:[[値1:表示項目文字1],[値2:表示項目文字2]]のように指定します。その他のオプションはAjax.InPlaceEditorと、ほぼ同じものを指定することができます。

Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Ajax.InPlaceCollectionEditor("sType1", "./setData.cgi", {
collection:["男性", "女性", "その他"],
});
new Ajax.InPlaceCollectionEditor("sType2", "./setData.cgi", {
collection:[[0,"10代"], [1,"20代"], [2,"30代"],[4,"40代以上"]],
okText : "保存",
cancelText : "キャンセル",
value:2
});
}
// --></script>
</head>
<body>
<h1>文字編集（メニュー選択）</h1>
<form id="editForm">
<div id="sType1">性別</div>
<div id="sType2">世代</div>
</form>
</body>
</html>