小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

JavaScript でテキストフィールドを選択リストにする

最終更新日: 2008-05-14

JavaScript でテキストフィールドに選択リストを実装する方法をご紹介します。
HTMLタグの知識だけで設定可能で、後からの変更も簡単です。

テキストフィールドに JavaScript で選択リストを付けた例

下記のようなイメージです。クリックする事によって、指定した内容がテキストフィールドに入ります。

設定方法

入力フォームのあるページを編集します。
ここでは、「すぐ使えるCGI」の入力フォームを編集する想定です。
templates/admin/2.html を編集して下さい。

関数の設定

テンプレートの <head> タグ内に、以下の JavaScript関数を追加して下さい。

<script type="text/javascript"><!--
function set_value(MyName, MyItem, IfAppend){
	var FM = document.forms[0];
	switch(IfAppend){
		case 1: //追記
			eval("FM."+MyName+".value += '"+MyItem+"'");
			break;
		default: //入れ替え(デフォルト)
			eval("FM."+MyName+".value = '"+MyItem+"'");
			break;
	}
}
// --></script>

ページ内にフォームが複数あるようでしたら、3行目の
「var FM = document.forms[0];」部分は、「(何番目のフォームか)-1」で数字の0を置き換えて下さい。

リンク設定

入力フィールドの近くにリンクを設定します。
上記例の場合、以下のように設定しています。

[<a href="javascript: set_value('subject', 'お知らせ:')">お知らせ</a>]
[<a href="javascript: set_value('subject', '緊急情報:')">緊急情報</a>]
[<a href="javascript: set_value('subject', '【重要】', 1)">重要</a>]
[<a href="javascript: set_value('subject', '')">クリア</a>]


「'subject'」の部分は、入力したいフィールドの name 属性の値にして下さい。

次の「'お知らせ:'」の部分に入力したいテキストを指定します。
HTMLタグなども指定できます。

「'【重要】'」の後に「, 1」とありますが、これは、既存の入力に追記する場合に指定して下さい。
内容を置き換える場合は指定不要です。

編集の反映

ローカルコンピュータで直接テンプレートファイルをブラウザで開いて動作を確認したら、サーバの同じ位置に上書きアップロードして下さい。

さらに詳しく