検索フォームで、選択項目のチェックボックスをプルダウンに変更
最終更新日:2023年03月08日
セレクトやマルチセレクトなど選択項目は、検索フォームではチェックボックスとして表示されます。
このページでは、チェックボックスではなくプルダウンで表示するサンプルプログラムをご案内いたします。
セレクトフィールドを検索項目に設定しているものとします。
変更前の設定
サンプルXML
検索フォームのソースデザイン画面にて、サンプルXMLは以下の通りです。
<usr_差し替えキーワード id="9999" title="xxxxxx" type="mm_alternative">
<main name="9999_9999_1">
<select value="1">ラベル1</select>
<select value="2">ラベル2</select>
<select value="3">ラベル3</select>
</main>
<option>
<exists name="exists_9999_9999">
<select value="0">全て</select>
<select value="2">値なし</select>
<select value="3">値あり</select>
</exists>
<action name="action_9999_9999">
<select value="0">を検索</select>
<select value="1">以外を検索</select>
</action>
</option>
</usr_差し替えキーワード>元のXSL
検索フォームの作成直後、ソースデザイン画面にて、XSLは以下の通りに設定されています。
<xsl:template match="usr_差し替えキーワード">
<div>
<xsl:for-each select="main/select">
<div>
<label>
<input type="radio" name="{../@name}" value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
</input>
<xsl:value-of select="." />
</label>
</div>
</xsl:for-each>
</div>
<input type="hidden" name="{option/action/@name}" value="0" />
</xsl:template>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、以下の通りです。
<div>
<div><label><input type="radio" name="9999_9999_1" value="1">ラベル1</label></div>
<div><label><input type="radio" name="9999_9999_1" value="2">ラベル2</label></div>
<div><label><input type="radio" name="9999_9999_1" value="3">ラベル3</label></div>
<input type="hidden" name="action_9999_9999" value="0" />
</div>変更手順
1. XSLソースにて、変更したいフィールドを指しているテンプレート（例．<xsl:template match="usr_xxxxxxxx">）を検索します。
2. XSLソースから「checkbox」を検索し、該当するフォームオブジェクトの前後のタグを確認します。
- 上記2の中の
<xsl:for-each></xsl:for-each>は繰り返し処理している部分です。 - 「xsl:for-each」の「
select="main/select"」は、XML内の「usr_xxxxxxxx」フィールドについて定義している要素「main」の子要素「select」を繰り返し処理することを指定しています。
3. サンプルXMLにて、要素「usr_xxxxxxxx」の子要素「main」の子要素「select」を確認します。
確認すると、スパイラルのフィールド設定で作成したセレクトフィールドのラベルが全て存在することが分かります。
サンプルXML
<main name="9999_9999_1">
<select value="1">ラベル1</select>
<select value="2">ラベル2</select>
<select value="3">ラベル3</select>
</main>4. 次に、プルダウンを表すHTMLのselectタグを書きます。
<select name="">
<option value="">▼選択してください。</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>5. HTMLのselect要素のname属性には、サンプルXMLのmain要素のname属性を値を設定します。
XSLで属性の値を取得するのは「要素/@属性」なので、「main/@name」となります。
6. XMLのmain要素の子要素selectを、ラベルの数だけ繰り返し指定するため、XSLの繰り返しのタグ<xsl:for-each select="main/select">を使います。
7. HTMLのoption要素のvalue属性には、サンプルXMLのselect要素のvalue属性値を設定します。
XSLで属性の値を取得するため、「main/@value」を使います。
変更後の設定
変更後のXSL
<xsl:template match="usr_差し替えキーワード">
<div>
<select name="{main/@name}">
<option value="">▼選択してください。</option>
<xsl:for-each select="main/select">
<option value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="selected">t</xsl:attribute>
</xsl:if>
<xsl:value-of select="." />
</option>
</xsl:for-each>
</select>
</div>
<input type="hidden" name="{option/action/@name}" value="0" />
</xsl:template>HTMLソース
<div> <select name=”9999_9999_1”>
<option value="">▼選択してください。</option>
<option value=”1”>ラベル1</option>
<option value=”2”>ラベル2</option>
<option value=”3”>ラベル3</option>
<option value=”4”>ラベル4</option>
</select> <input type="hidden" name="action_9999_9999" value="0" />
</div>