知識が乏しいため、お知恵を拝借したいと存じます。
Aのプルダウンの値を選択すると、Bのプルダウンの値が連動して表示されるところまではできたのですが、Bのプルダウンの値を選択すると選択した値に設定したサイトに移動させる方法がわかりません。
具体的に
Aのプルダウンに東京都、大阪府と表示させ、
東京を選択するとBのプルダウンには港区、渋谷区 、大阪を選択すると大阪市、堺市
と表示させるところまではできました。
質問点は
大阪市を選択すると大阪市のサイトにジャンプさせたいのですが。
プルダウンを選択してすぐジャンプの方法と、配置したボタンを押下してジャンプジャンプの方法が
分かれば幸いです。片方でも構いません。
なにとぞご教授お願いいたします。
No.3ベストアンサー
- 回答日時:
play_with_youさんとその回答の補足から作りました。
RUN押下すれば動作確認できます。(削除されてたらすみません。)
http://plnkr.co/edit/aglDSY
修正個所は下記2点
1.
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","北九州市"]]
}
2.
<a href="#" id="makerURL"><input type="button" value=" 検索する "></a>
↓
<a href="#" id="makerURL"><input type="button" value=" 検索する "></a>
新規追加として下記2点
// 都道府県先によってURL変更
$("#makerItem").change(function () {
$("#makerURL").attr({"href":$(this).val()});
});
//URL初期化
$("#makerURL").attr({"href":""});
があります。
No.2
- 回答日時:
ORUKA1951の回答は勘違いしているので気にしないように。
「プルダウン」は<option>で作られていると考えていいですか?
Aの選択でBを変更する処理ができているのでしたら、それの応用でできると思うのですが。
ジャンプ先は<option>のvalue属性に設定できますよね。
「Bの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>Aで検索する</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
- 回答日時:
javascriptはクライアント依存なので、最近はCSSを使いますけど??
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
でブラウザの[表示メニュー]→[スタイル(シート)」を選択して、「横並び」「横並びプルダウン」「ページの最上部へ」「ヘッダーの下」などが、それに当たります。
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;などにして、それを基準に絶対配置するとよいだけですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excel VBAプルダウンの値を変えながら2枚ずつ印刷する方法? 4 2022/05/27 13:04
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- Excel(エクセル) VLOOKUP が機能しない、その原因は何 ? 8 2022/10/19 12:06
- Excel(エクセル) Excelで質問です。 詳細(写真) ①黄色の部分を全てプルダウンを設定する。 ②リストはG列 ③リ 1 2023/06/16 21:54
- Excel(エクセル) ユーザー定義について質問です。 2 2023/06/28 13:21
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2022/04/01 12:11
- Excel(エクセル) ExcelのVBAコードについて教えてください。 1 2022/06/20 10:57
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2022/06/10 11:06
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Excel(エクセル) エクセルの書式設定について教えてください。 2 2023/02/03 09:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryプルダウンメニュー個別着色
-
特定のクラスを持つ<li>を非表...
-
<ul>から</ul>の間をjavascriptで
-
JSの変数をHTMLに渡す方法
-
jQuery タブメニューへのダイ...
-
複数の写真がマウスで左右に移...
-
大量のチェックボックス状態取...
-
htmlの記述で link rel=styles...
-
MAX関数を使ってからLEFT JOIN...
-
div要素を半透明にして且つ外枠...
-
複数の要素へ appendchild でき...
-
以下のタグはクリックすると画...
-
Javascript初心者|jQueryの.va...
-
Javaの正規表現でimgタグのalt...
-
画像の座標位置取得
-
SEO対策としての画像リンクなど...
-
【java】背景画像を一定時間で...
-
【HTML5】【canvas】【js】...
-
タイマーをデジタル時計風にす...
-
画像にマウスを乗せた時のJava ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryのeqで最後からn番目以降...
-
jQueryで、リンクURLの一致を確...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
文字と数字が混在する要素のsor...
-
onmouseoverの表示切り替えが上...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
-
どの<li><a> が押されたか判別...
おすすめ情報