検索フォームで、選択した地方に属する都道府県を自動で選択
最終更新日:2023年03月30日
当ページではJavaScriptを使って、検索条件を変更する方法をご案内いたします。
変更前の設定
サンプルXML
検索フォームのソースデザイン画面にて、サンプルXMLは以下の通りです。
<usr_pref id="99999" title="pref" type="mm_pref">
<main name="9999_99999_1">
<select value="1">北海道</select>
<select value="2">青森県</select>
<select value="3">岩手県</select>
<select value="4">宮城県</select>
（中略）
</main>
<option>
<exists name="exists_9999_99999">
<select value="0">全て</select>
<select value="2">値なし</select>
<select value="3">値あり</select>
</exists>
<action name="action_9999_99999">
<select value="0">を検索</select>
<select value="1">以外を検索</select>
</action>
</option>
</usr_pref>元のXSL
検索フォームの作成直後、ソースデザイン画面にて、XSLは以下の通りに設定されています。
<xsl:template match="usr_pref">
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
都道府県
</td>
<td class="smp-sf-body"
style="border:1px solid #999999; padding:5px; background-color:#FFFFFF; font-size:9pt; width:300px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<xsl:for-each select="main/select">
<div>
<xsl:if test="not(@newLine = 't')">
<xsl:attribute name="style">float:left;</xsl:attribute>
</xsl:if>
<label>
<span>
<input type="checkbox" name="{../@name}" value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
</input>
<xsl:value-of select="." />
</span>
</label>
</div>
</xsl:for-each>
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、以下の通りです。
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
都道府県
</td>
<td class="smp-sf-body"
style="border:1px solid #999999; padding:5px; background-color:#FFFFFF; font-size:9pt; width:300px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="1">北海道
</span>
</label>
</div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="2">青森県
</span>
</label>
</div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="3">岩手県
</span>
</label>
</div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="4">宮城県
</span>
</label>
</div>
（中略）
</div>
</td>
<td style="display:none;">
<input type="hidden" name="action_9999_99999" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>変更手順
1.地方を選択すると、都道府県にチェックが入るように一覧表ページのソースにJavaScriptを追記します。
JavaScript
<script type="text/javascript">
<!--
function fnPref(obj) {
var cateid = "";
cateid = obj.id;//選択されたカテゴリのid
fnPrefChoose(cateid);
}
function fnPrefChoose(cate) {
var objPref = document.getElementById("pref-list"), objIpt = objPref.getElementsByTagName("input");
var lower, upper;
switch (cate) {
case "pref-al":
lower = 1;
upper = 47;
break;
case "pref-ht":
lower = 1;
upper = 7;
break;
case "pref-ka":
lower = 8;
upper = 14;
break;
case "pref-ch":
lower = 15;
upper = 23;
break;
case "pref-ki":
lower = 24;
upper = 30;
break;
case "pref-cs":
lower = 31;
upper = 39;
break;
case "pref-ky":
lower = 40;
upper = 47;
break;
case "pref-clear":
lower = "";
upper = "";
break;
}
for (var j = 0; j < objIpt.length; j++) {
if (lower != "" && upper != "") {
if (lower <= objIpt[j].value && objIpt[j].value <= upper) {
objIpt[j].checked = true;
}
}else {
objIpt[j].checked = false;
}
}
}
//-->
</script>2.XSLに地方リストを追記します。
変更前のXSL
<xsl:template match="usr_pref">
（中略）
<div>
<xsl:for-each select="main/select">変更後のXSL
<xsl:template match="usr_pref">
（中略）
<div id="pref-list">
<ul>
<li id="pref-al" onclick="fnPref(this);">全て選択</li>
<li id="pref-ht" onclick="fnPref(this);">北海道・東北地方</li>
<li id="pref-ka" onclick="fnPref(this);">関東地方</li>
<li id="pref-ch" onclick="fnPref(this);">中部地方</li>
<li id="pref-ki" onclick="fnPref(this);">近畿地方</li>
<li id="pref-cs" onclick="fnPref(this);">中国・四国地方</li>
<li id="pref-ky" onclick="fnPref(this);">九州地方</li>
<li id="pref-clear" onclick="fnPref(this);">全てチェックを外す</li>
</ul>
<xsl:for-each select="main/select">変更後の設定
変更後のXSL
変更後のXSLは以下の通りです。
<xsl:template match="usr_pref">
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
都道府県
</td>
<td class="smp-sf-body"
style="border:1px solid #999999; padding:5px; background-color:#FFFFFF; font-size:9pt; width:300px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div id="pref-list">
<ul>
<li id="pref-al" onclick="fnPref(this);">全て選択</li>
<li id="pref-ht" onclick="fnPref(this);">北海道・東北地方</li>
<li id="pref-ka" onclick="fnPref(this);">関東地方</li>
<li id="pref-ch" onclick="fnPref(this);">中部地方</li>
<li id="pref-ki" onclick="fnPref(this);">近畿地方</li>
<li id="pref-cs" onclick="fnPref(this);">中国・四国地方</li>
<li id="pref-ky" onclick="fnPref(this);">九州地方</li>
<li id="pref-clear" onclick="fnPref(this);">全てチェックを外す</li>
</ul>
<xsl:for-each select="main/select">
<div>
<xsl:if test="not(@newLine = 't')">
<xsl:attribute name="style">float:left;</xsl:attribute>
</xsl:if>
<label>
<span>
<input type="checkbox" name="{../@name}" value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
</input>
<xsl:value-of select="." />
</span>
</label>
</div>
</xsl:for-each>
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>HTMLソース
ブラウザで一覧表のHTMLソースを表示した場合、変更後は以下の通りです。
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
都道府県
</td>
<td class="smp-sf-body"
style="border:1px solid #999999; padding:5px; background-color:#FFFFFF; font-size:9pt; width:300px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div id="pref-list">
<ul>
<li id="pref-al" onclick="fnPref(this);">全て選択</li>
<li id="pref-ht" onclick="fnPref(this);">北海道・東北地方</li>
<li id="pref-ka" onclick="fnPref(this);">関東地方</li>
<li id="pref-ch" onclick="fnPref(this);">中部地方</li>
<li id="pref-ki" onclick="fnPref(this);">近畿地方</li>
<li id="pref-cs" onclick="fnPref(this);">中国・四国地方</li>
<li id="pref-ky" onclick="fnPref(this);">九州地方</li>
<li id="pref-clear" onclick="fnPref(this);">全てチェックを外す</li>
</ul>
<hr style="clear:both;" />
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="1">北海道
</span>
</label>
</div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="2">青森県
</span>
</label>
</div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="3">岩手県
</span>
</label>
</div>
<div style=float:left;>
<label>
<span>
<input type="checkbox" name="9999_99999_1" value="4">宮城県
</span>
</label>
</div>
（中略）
</div>
</td>
<td style="display:none;">
<input type="hidden" name="action_9999_99999" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>