- ベストアンサー
セレクトボックスを直前の選択で変動させる方法
- セレクトボックスの選択肢を直前の選択で変動させたい場合、JavaScriptを使用して選択肢リストを変更することができます。
- また、セレクトボックスと連動してボタンのリンクを変更するためにも、JavaScriptを使用します。
- 具体的な方法としては、選択肢が変更された時に実行される関数を用意し、その関数内で選択肢リストの内容を動的に生成するような処理を行います。
- minami963852741
- お礼率91% (22/24)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
以前にバイク王のセレクトボックスについての質問の時に作ったやつがあります。 http://okwave.jp/qa/q5992319.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