プルダウンメニュー連動後の処理について

質問

知識が乏しいため、お知恵を拝借したいと存じます。

Aのプルダウンの値を選択すると、Bのプルダウンの値が連動して表示されるところまではできたのですが、Bのプルダウンの値を選択すると選択した値に設定したサイトに移動させる方法がわかりません。

具体的に
Aのプルダウンに東京都、大阪府と表示させ、
東京を選択するとBのプルダウンには港区、渋谷区　、大阪を選択すると大阪市、堺市
と表示させるところまではできました。

質問点は
大阪市を選択すると大阪市のサイトにジャンプさせたいのですが。

プルダウンを選択してすぐジャンプの方法と、配置したボタンを押下してジャンプジャンプの方法が
分かれば幸いです。片方でも構いません。

なにとぞご教授お願いいたします。

回答No.3

cero_d · ベストアンサー

play_with_youさんとその回答の補足から作りました。

RUN押下すれば動作確認できます。(削除されてたらすみません。)
http://plnkr.co/edit/aglDSY

修正個所は下記２点
１．
var makerArray = {
"0001":[["1","選択してください"],["2","町田市"],["3","立川市"]],
"0002":[["1","選択してください"],["2","大阪市"],["3","堺市"]],
"0003":[["1","選択してください"],["2","名古屋市"],["3","豊田市"]],
"0004":[["1","選択してください"],["2","福岡市"],["3","北九州市"]]
}
↓
var makerArray = {
"0001":[["","選択してください"],["http://google.co.jp","町田市"],["http://yahoo.co.jp","立川市"]],
"0002":[["","選択してください"],["http://google.co.jp","大阪市"],["http://yahoo.co.jp","堺市"]],
"0003":[["","選択してください"],["http://google.co.jp","名古屋市"],["http://yahoo.co.jp","豊田市"]],
"0004":[["","選択してください"],["http://google.co.jp","福岡市"],["http://yahoo.co.jp","北九州市"]]
}

２．
<a href="#" id="makerURL"><input type="button" value="　検索する　"></a>
↓
<a href="#" id="makerURL"><input type="button" value="　検索する　"></a>

新規追加として下記２点

// 都道府県先によってURL変更
$("#makerItem").change(function () {
$("#makerURL").attr({"href":$(this).val()});
});

//URL初期化
$("#makerURL").attr({"href":""});

があります。

お礼

迅速なご教授に感謝致します。知識が無いところで作成を指示されて困り果てて居たところです。ありがとうございました。

回答No.2

play_with_you

ORUKA1951の回答は勘違いしているので気にしないように。

「プルダウン」は<option>で作られていると考えていいですか？
Ａの選択でＢを変更する処理ができているのでしたら、それの応用でできると思うのですが。
ジャンプ先は<option>のvalue属性に設定できますよね。
「Ｂのonchangeで移動」または「設置したボタンのonclickで移動」どちらでもいいと思います。
JavaScriptでの移動はlocation.hrefあたりでどうぞ。

補足

早速の回答ありがとうございます。
下記のような形で連動させております。
なにぶんにも素人なので理解できておりません、ご教授お願いします。

java別ファイル
// プルダウンを連動させ、動的に内容を変更させるJS
var makerArray = {
"0001":[["1","選択してください"],["2","町田市"],["3","立川市"]],
"0002":[["1","選択してください"],["2","大阪市"],["3","堺市"]],
"0003":[["1","選択してください"],["2","名古屋市"],["3","豊田市"]],
"0004":[["1","選択してください"],["2","福岡市"],["3","北九州市"]],
}
$(function () {
$("body").pulldownChange("commondityItem", "makerItem", makerArray);
});

$.fn.pulldownChange = function(targetid, changeid, changeItemArray){
$("#" + targetid).change(function(){
value = $(this).val();
$("#" + changeid).children().remove();
changePulldown = changeItemArray[value];
changeSellectNode = window.document.getElementById(changeid);
for (var i = 0; i < changePulldown.length; i++ ) {
//$("#" + changeid).append("");
changeSellectNode.options[i] = new Option(changePulldown[i][1], changePulldown[i][0]);
}
changeSellectNode.selectedIndex = 0;
});
}

※本体
<h3>検索する</h3>
<p>Ａで検索する</p><select name="01" class="input_margin" id="commondityItem">
<option value="">選択してください</option>
<option value="0001">東京都</option>
<option value="0002">大阪府</option>
<option value="0003">愛知県</option>
<option value="0004">福岡県</option>
</select></p>
<!-- 都道府県から市町村を表示する -->
<p>市町村で検索する</p><select name="01" class="input_margin" id="makerItem"></select></p>

ここからの処理がわかりません。
<a href="#" id="makerItem"><input type="button" value="　検索する　"></a>

回答No.1

ORUKA1951

javascriptはクライアント依存なので、最近はCSSを使いますけど??
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　でブラウザの[表示メニュー]→[スタイル(シート)」を選択して、「横並び」「横並びプルダウン」「ページの最上部へ」「ヘッダーの下」などが、それに当たります。

HTMLは率直に
<div class="nav">
　<ol>
　　<li><a href=""></a>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ol>
　　</li>
　　<li><a href=""></a>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ol>
　　</li>
　　<li><a href=""></a>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ol>
　　</li>
　</ol>
</div>
　のように記述して、サブリストは、親リスト項目をposition:relative;などにして、それを基準に絶対配置するとよいだけですよ。