SELECTメニューをページ内に複数共存させたい

お世話になります。
ホームページのindex.html内に、セレクトメニューから選択してGOボタンでその選択肢のリンクに飛ぶというものを実装したく、
調べたところJavaScriptを使用する方法を見つけたのですが、
セレクトメニューが複数となるとうまく動作せず困っております。

例として下記のようなhtmlを書きました。

html
1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5	<meta charset="UTF-8">
6	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
7	<title>JUMP</title>
8<script type="text/javascript">
9<!--
10var target = "";
11
12function jump(){
13	var url = document.form1.select.options[document.form1.select.selectedIndex].value;
14	if(url != "" ){
15		if(target == 'top'){
16			top.location.href = url;
17		}
18		else if(target == 'blank'){
19			window.open(url, 'window_name');
20		}
21		else if(target != ""){
22			eval('parent.' + target + '.location.href = url');
23		}
24		else{
25			location.href = url;
26		}
27	}
28}
29// -->
30</script>
31</head>
32<body>
33
34<div class="search-list">
35<h5>検索エンジンだよ</h5>
36<p>検索エンジンをまとめました</p>
37</div>
38
39<div class="product_info">
40<h5>検索エンジンリスト</h5>
41<form action="#" name="form1">
42<select name="select">
43<option value="">リンクを選択して下さい</option>
44<option value="http://google.com">google</option>
45<option value="http://www.yahoo.co.jp">Yahoo!</option>							
46</select>
47<input type="button" value="GO" onClick="jump()" class="btn btn-primary">
48</form>
49</div>
50
51</body>
52</html>
53

こうした場合に、下記の部分のセレクトメニュー、Goボタンを複製したい場合に、
単純に2度書くと当然ながら動作しなくなってしまいます。

<div class="search-list">
<h5>検索エンジンだよ</h5>
<p>検索エンジンをまとめました</p>
</div>

<div class="product_info">
<h5>検索エンジンリスト</h5>
<form action="#" name="form1">
<select name="select">
<option value="">リンクを選択して下さい</option>
<option value="http://google.com">google</option>
<option value="http://www.yahoo.co.jp">Yahoo!</option>							
</select>
<input type="button" value="GO" onClick="jump()" class="btn btn-primary">
</form>
</div>

ここで、formの名前やSelectの名前を変更したりして
Script部分も複製したりと色々試したものの、
両方が動作するようには出来ませんでした。

基礎知識の不足とは承知しておりますが、
かなり時間もなく急ぎで仕上げなくてはならない状況ですので、
失礼承知ではございますがご教示いただけますと幸いです。

よろしくお願いいたします。

NozomuIkuta

2019/01/03 09:44

jQueryは使えない環境ですか？もし使えるなら、バージョンを書いていただけると幸いです。

J4CK1E

2019/01/03 10:24

BootStrapを使用しているサイトになりますので、jQueryは使用できる環境でございます。現在使用しているバージョンはv1.11.1となっております。よろしくお願いいたします。

退会済みユーザー

2019/01/03 13:20

ん？ bootstrap は Jquery 2.x / 3.x でもつかえるので bootstrap をつかってるから jquery はこのバージョンってのはおかしいよ

退会済みユーザー

2019/01/03 13:21

またこのテの修正依頼は　バージョン情報は質問を修正して追記してくださいね

J4CK1E

2019/01/03 23:21

ご指摘ありがとうございます。いえ、bootstrapを使っているのでということではなく、そこに含まれていたバージョンの話をしているだけです。

行動規範の内容に同意します

回答1件

ベストアンサー

やりかたは色々ありますが、まずは動かない原因から説明します。

<input type="button" value="GO" onClick="jump()" class="btn btn-primary">をクリックした際、jump()関数が呼び出されますが、この中で決め打ちのform名でセレクトの値を取得しているため、複数のform要素を設置した場合に対応できていません。

JavaScript
1function jump() {
2  var url =　document.form1.xxx // -> form1にしか対応できない
3}

対応1

jump()を呼び出す際に、フォーム名を指定して呼び出します。

<input type="button" value="GO" onClick="jump('form1')" class="btn btn-primary">

JavaScript
1function jump(formName) {
2  var url =　document[formName].xxx // -> formNameにより取得できる値が変わる
3}

この方法は、現状のソースコードからの変化が一番少ないですが、毎回form要素の名前を手動でHTMLの複数箇所に書く必要があります。

対応2

jQueryで<form>ごとに処理を設定します。
同じページに別の目的でform要素がある場合などは、専用のクラスをつけるなどして区別する必要があります。

HTML
1<form name="form1">
2  <input type="button" value="GO" class="btn btn-primary">
3</form>
4<form name="form2">
5  <input type="button" value="GO" class="btn btn-primary">
6</form>

JavaScript
1$(function() {
2  var target = "";
3
4  $('form').each(function() {
5　　 // asahina1979さんのご指摘により修正　ここから
6    var $this = $(this);
7    var $select = $this.find('select');
8    var $button = $this.find('input[type="button"]');
9　　 // asahina1979さんのご指摘により修正　ここまで
10
11    $button.on('click', function() {
12      var url = $select.val();
13
14      if (url != "") {
15        if (target == 'top') {
16          top.location.href = url;
17        }
18        else if (target == 'blank') {
19          window.open(url, 'window_name');
20        }
21        else if (target != "") {
22          eval('parent.' + target + '.location.href = url');
23        }
24        else {
25          location.href = url;
26        }
27      }
28    });
29  });
30});