ver.1サポートサイト

検索フォームで、選択した地方に属する都道府県を自動で選択

最終更新日:2020年11月20日

当ページでは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>