セレクトボックスの選択肢を直前の選択で変動させたい

解決済

質問者：minami963852741
質問日時：2010/12/02 18:44
回答数：1件

お世話になります。

バイク王
http://www.8190.co.jp/

セレクトボックスを上記サイトのように
選択肢リストを直前の選択肢によって変化させて
さらに、セレクトボックス横のボタンのリンクも変更させたいのですが、
どのように設定すればできますか？

サイトのheadタグ内に下記の記述があるのですが、
3つ目のセレクトボックスの選択肢を設定しているのがどのファイルなのかわかりません。

上記サイトと全く同じでなくても、
セレクトボックスが3つあって、
1つ目と2つ目の選択肢によって3つ目の選択肢リストが変わり、
ボックス横のボタンのリンクも変化するフォームの作成方法を
ご存じでしたら、ぜひ教えていただけないでしょうか。
よろしくお願いいたします。

<script language="javascript" type="text/javascript">

function models_gen()
{

if ((document.sateiform.maker_id.selectedIndex > 0)&&(document.sateiform.engine_size_id.
selectedIndex > 0)){
var uri = '/online/modellist/'+document.sateiform.maker_id.value+'/'+document.sateiform.engine_size_id.value;
new Ajax.Updater('placebikelist', uri, { method: 'get'});
}
}

function satei_prepare()
{
if((document.sateiform.maker_id.selectedIndex > 0)
&&(document.sateiform.engine_size_id.selectedIndex > 0)
&&(document.sateiform.model_id.selectedIndex > 0)){
return true;
}
else{
alert('バイクを選択してください');
return false;
}
}

-->
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： yyr446
回答日時：2010/12/02 20:05

以前にバイク王のセレクトボックスについての質問の時に作ったやつがあります。

http://oshiete.goo.ne.jp/qa/5992319.html

選択させる項目の階層構造を外部に<XML>で記述しておいて、javascriptの
XMLHttpRequestで読み込んで、selectboxを次々と動的に作成するAJAXです。

（使い方）
　 new xmlselectbox(selector,xmlpath,key,callback)
　　selector:セレクトボックスを書き出す領域のCSSセレクター指定
　　xmlpath：読み込むXMLのファイル名(パス名)
　　key：最初のセレクトボックスの項目名
　 callback(省略可)：コールバック関数　引数(最後のSELECTBOXのname,最後のSELECTBOXのvalue)
　（例）
　 myselectbox1=xmlselectbox('#sel1','/syouhin.xml','maker',
　 function(selectname,value){
　 alert("選ばれたのは" + selectname +"の" + value + "です。");
　 }
　 );

読み込むXML(syouhin.xml)のサンプル

<?xml version="1.0" encoding="UTF-8"?>
<アイテム>
　<メーカー>111
　 <タイプ>XXX
　　 <商品>aaa
　　　<価格>100</価格>
　　 </商品>
　　 <商品>bbb
　　　<価格>200</価格>
　　 </商品>
　 </タイプ>
　 <タイプ>YYY
　　 <商品>ddd
　　　<価格>400</価格>
　　 </商品>
　　 <商品>eee
　　　<価格>500</価格>
　　 </商品>
　 </タイプ>
　 <タイプ>ZZZ
　　 <商品>ggg
　　　<価格>700</価格>
　　 </商品>
　　 <商品>hhh
　　　<価格>800</価格>
　　 </商品>
　 </タイプ>
　</メーカー>
　<メーカー>222
　 <タイプ>OOO
　　 <商品>jjj
　　　<価格>1000</価格>
　　 </商品>
　　 <商品>kkk
　　　<価格>2000</価格>
　　 </商品>
　 </タイプ>
　 <タイプ>PPP
　　 <商品>mmm
　　　<価格>4000</価格>
　　 </商品>
　　 <商品>nnn
　　　<価格>5000</価格>
　　 </商品>
　 </タイプ>
　 <タイプ>QQQ
　　 <商品>ppp
　　　<価格>7000</価格>
　　 </商品>
　　 <商品>qqq
　　　<価格>8000</価格>
　　 </商品>
　　 <商品>rrr
　　　<価格>9000</価格>
　　 </商品>
　 </タイプ>
　</メーカー>
</アイテム>

javascriptコード(XmlSelectBox1.js)は
https://gist.github.com/725124

HTMLサンプルは、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Xml Select Box</title>
<script type="text/javascript" src="XmlSelectBox1.js"></script>
</head>
<body>
<h2>Xml Select Box</h2>
<button onclick="go();">セレクトボックスを生成</button>
<div id="sel1"></div>
<script type="text/javascript">
　function go(){
　 var myselectbox1 = xmlselectbox('#sel1','/syouhin.xml','メーカー',
　 function(selectname,value){
　 alert("選ばれたのは" + selectname +"の" + value + "です。");
　 });
　}
</script>
</body>
</html>

この回答への補足

yyr446　様
ご回答ありがとうございます。

[javascript]連動プルダウン(select)
../index.htmld.hatena.ne.jp/Mars/20071109
セレクトボックスでリンクする（ボタン付き）
../index.htmlwww.tagindex.com/javascript/link/select2.html

おかげさまで上記2つのサイトを参考にして以下のように作成して、
最後のボックスの選択内容でリンクできました。

しかしセレクトボックスの選択肢を選択後、
ホームページへのリンクを踏むなどして開き直した場合は選択肢がリセットされるのですが、
ブラウザ(IE8)の更新ボタンを押した場合に選択肢がリセットされません。
もしご存じでしたら教えていただけないでしょうか
よろしくお願いいたします。

※上記サイトのサンプルはIE8でも更新ボタンを押しただけでリセットされます。
※半角スペース2つを＿で置き換えてます
<p>
＿<form action="#" name="form1">
＿＿大カテ
＿＿<select id="SEL1">
＿＿＿＿<option value="">メーカー選択</option>
＿＿＿＿<option value="XXX">KAWASAKI</option>
＿＿＿＿<option value="YYY">SUZUKI</option>
＿＿＿＿<option value="ZZZ">HONDA</option>
＿＿</select>
＿＿中カテ
＿＿<select id="SEL2">
＿＿＿＿<option value="">排気量選択</option>
＿＿＿<optgroup label="XXX">
＿＿＿＿<option value="x1">50cc以下</option>
＿＿＿＿<option value="x2">51cc～125cc以下</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="YYY">
＿＿＿＿<option value="y1">50cc以下</option>
＿＿＿＿<option value="y2">51cc～125cc以下</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="ZZZ">
＿＿＿＿<option value="z1">50cc以下</option>
＿＿＿＿<option value="z2">51cc～125cc以下</option>
＿＿＿</optgroup>
＿＿</select>
＿＿小カテ
＿＿<select id="SEL3" name="select">
＿＿＿＿<option value="">未選択</option>
＿＿＿<optgroup label="x1">
＿＿＿＿<option value="../a.html">x1a</option>
＿＿＿＿<option value="../a.html">x2a</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="x2">
＿＿＿＿<option value="../a.html">x2a</option>
＿＿＿＿<option value="../a.html">x2b</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="y1">
＿＿＿＿<option value="../a.html">y1a</option>
＿＿＿＿<option value="../a.html">y1b</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="y2">
＿＿＿＿<option value="../a.html">y2a</option>
＿＿＿＿<option value="../a.html">y2b</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="z1">
＿＿＿＿<option value="../a.html">z1a</option>
＿＿＿＿<option value="../a.html">z1b</option>
＿＿＿</optgroup>
＿＿＿<optgroup label="z2">
＿＿＿＿<option value="../a.html">z2a</option>
＿＿＿＿<option value="../a.html">z2b</option>
＿＿＿</optgroup>
＿＿</select>
<script type="text/javascript">
ConnectedS