マルチセレクトフィールドをプルダウン表示に変更する方法

標準ではチェックボックスで表示される複数選択可能なマルチセレクトフィールドを択一選択のプルダウン表示に変更する方法をご案内します。
DB構成を変えずに複数選択から択一式に変更したい場合などご活用ください。

イメージ図

DB設定

マルチセレクトタイプのフィールドにラベル1～4を設定し、
「ご希望の連絡方法」を複数選択できる項目でご案内します。

入力ページ設定

Web機能でフォームを作成すると、標準ではマルチセレクトフィールドがチェックボックスで表示されます。

設置ソースの確認方法

入力ページの[設置ソース]ボタンを押下し、ダウンロードしたファイルを確認します。
マルチセレクト（チェックボックス形式・縦並び）は以下のように記述されています。

<dl class="cf">
<dt class="title">
ご希望の連絡方法 <span class="need">＊</span>
</dt><dd class="data multi2">
<ul class="cf">
<li><label><input class="input" type="checkbox" value="1" name="●●●" $●●●:1$><span>電話</span></label></li>
<li><label><input class="input" type="checkbox" value="2" name="●●●" $●●●:2$><span>メール</span></label></li>
<li><label><input class="input" type="checkbox" value="3" name="●●●" $●●●:3$><span>FAX</span></label></li>
<li><label><input class="input" type="checkbox" value="4" name="●●●" $●●●:4$><span>Web会議</span></label></li>
</ul>
<input type="hidden" value="" name="●●●">
<span class="msg">$error:●●●$</span>
</dd>
</dl>

　※●●●には、データベース構築の際、フィールド名ごとに設定した差替キーワードが入ります。
　　また、「$●●●:1$」の“:(コロン)”以降の数値は、セレクトの「ラベルID」のことで、これは自動でHTMLに記載されます。

プルダウン表示への変更方法

入力ページのHTMLソースを修正をし、プルダウン形式で表示させます。

修正後のコード

<dl class="cf">
<dt class="title">
ご希望の連絡方法<span class="need">＊</span>
</dt><dd class="data ">
<select class="$errorInputColor:●●●$" name="●●●">
<option value="">----- 選択してください -----</option>
<option value="1" $●●●:s1$>電話</option>
<option value="2" $●●●:s2$>メール</option>
<option value="3" $●●●:s3$>FAX</option>
<option value="4" $●●●:s4$>Web会議</option>
</select>
<br>
<span class="msg">$error:●●●$</span>
</dd>
</dl>

修正ポイント

・ $タグのバリュー値に "s" を付与することで、確認ページから入力ページへ戻った際に選択値が保持されます。
　例：$contact:s1$（チェックボックス時は $contact:1$）
　※記載がない場合、確認ページから戻った際に入力内容がクリアされ、再選択が必要になります。
・CSSの修正

＜dd class="data multi2"＞

→

＜dd class="data"＞

に変更します。
・チェックボックスの場合

＜input type="hidden" value="" name="●●●"＞

が必要ですが、プルダウンではselect要素を使用するため不要です。
・マルチセレクト(128項目)にも同じ方法で対応可能です。

開発情報・ナレッジ