この記事、（今風のコーディングではないですが）地味に好評だったようです。
ということで、今回はときおり話題に挙がっていた、複数カートで「オプション項目も連動する」を作ってみました。
そういえば、カラーミーショップのオプションって、もともとはプルダウン形式のみでしたっけね。
1. コード
1.1 JavaScript
<script type="text/javascript">
<!--
function option_change(oid, p){
if(p==1){
var n = $("#s" + oid + "1")[0].selectedIndex;
$("#s" + oid + "2")[0].selectedIndex=n;
}
else if(p==2) {
var n = $("#s" + oid + "2")[0].selectedIndex;
$("#s" + oid + "1")[0].selectedIndex=n;
}
}
// -->
</script >
1.2 商品詳細ページ（ひとつめ）
<{section name=num loop=$option}>
<div class="cell_mar">
<select name="<{$option[num].select_name}>" onchange="option_change(<{$option[num].id}>, 1)" id="s<{$option[num].id}>1">
<option value="">選択してください</option>
<{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }>
</select>
</div>
<{/section}>
1.3 商品詳細ページ（ふたつめ）
<{section name=num loop=$option}>
<div class="cell_mar">
<select name="<{$option[num].select_name}>2" onchange="option_change(<{$option[num].id}>, 2)" id="s<{$option[num].id}>2">
<option value="">選択してください</option>
<{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }>
</select>
</div>
<{/section}>
2. 簡単な解説
商品詳細ページは古めのテンプレ・ウッドがベースのため、プルダウンメニューです。
オレンジマーカー部は追加箇所。select nameのあとにonchangeとidを追加。
onchageイベントは、オプションを変更したときに関数を呼び出します。
カートとオプションごとに固有のidを振っています。
記事幅の都合で勝手に改行が入っていますが不要です。
$("#id")[0].selectedIndex でプルダウンメニューの何番目を選んだかがわかりますので、変更したほうから変更していないほうへ代入しています。
【関連記事】
・カートに入れるを二ヶ所につける
