teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問プルダウン検索を実装したい2

Q&A

解決済

2回答

1215閲覧

プルダウン検索を実装したい2

moromiso
moromiso

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/10/24 01:46

編集2023/10/26 03:02

0

0

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • 楽天などのECサイトのTOPでプルダウン検索機能を有効にしたい。
  • 自社サイトにて３つの選択肢から数字を選択させ、それをもとに検索結果を楽天上に表示させたい。
  • タイヤの幅 扁平率 インチを選択させ、自社の楽天サイトからタイヤの検索結果を表示させる。

前提

以前こちらで違法になるかも！
っと指摘を受けましたが、それでは上司が納得しませんでした。
それを実装させる、させないは別にして完成させたいです。

発生している問題・エラーメッセージ

以前はエラーが出ていたのですが、ヤフー知恵袋の説明通りにやったら、エラーも出なくなってしまった。

該当のソースコード

ソースコード
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scalable=yes,initial-scale=1.0" >
<title>タイヤを探す</title>
<!-- <link rel="stylesheet" href="./css/search-style.css?1912"> -->
<script type="text/template" name="rat" id="ratAccountId" value="1"></script> <script type="text/template" name="rat" id="ratServiceId" value="5"></script> <script type="text/template" name="rat" id="ratSiteSection" value="gold"></script> <script type="text/template" name="rat" id="ratAdobeSiteSection" value="shop"></script> <script type="text/template" name="rat" id="ratPageType" value="gold"></script> <script type="text/javascript" src="https://r.r10s.jp/com/rat/js/rat-cdn.js" async defer></script></head>
<body>
<!-- <figure class="img"><img src="./images/search_t_img.png" width="500" alt=""></figure> -->

<form name="myForm" id="myForm" method="GET" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_blank">
    <input type="hidden" name="sv" value="6">
    <input type="hidden" name="sid" value="223203">
    <input type="hidden" name="su" value="ainet">
    <input type="hidden" name="sn" value="AINET">
    <!--▼ジャンルコード-->
    <input type="hidden" name="g" id="g" value="うんこ">
    
        <div class="select-list">

            <select name="size" id="size">
                <option value="" selected>■タイヤ幅を選択</option>
                <option value="tg1002956">135</option>
                <option value="tg1002957">145</option>
                <option value="tg1002958">155</option>
                <option value="tg1002959">165</option>
                <option value="tg1002960">175</option>
                <option value="tg1002961">185</option>
                <option value="tg1002962">195</option>
                <option value="tg1002963">205</option>
                <option value="tg1002964">215</option>
                <option value="tg1002965">225</option>
                <option value="tg1002966">235</option>
                <option value="tg1002967">245</option>
                <option value="tg1002968">255</option>
                <option value="tg1002969">265</option>
                <option value="tg1002970">275</option>
                <option value="tg1002971">285</option>
                <option value="tg1002972">295</option>
                <option value="tg1002973">305</option>
                <option value="tg1002974">315</option>
                <option value="tg1002975">325</option>
                <option value="tg1037304">335</option>
            </select>
            <select name="henp" id="henp">
                <option value="" selected>■偏平率を選択</option>
<!--▼20230106削除
                <option value="/20">20</option>
-->
                <option value="tg1002943">25</option>
                <option value="tg1002944">30</option>
                <option value="tg1002945">35</option>
                <option value="tg1002946">40</option>
                <option value="tg1002947">45</option>
                <option value="tg1002948">50</option>
                <option value="tg1002949">55</option>
                <option value="tg1002950">60</option>
                <option value="tg1002951">65</option>
                <option value="tg1002952">70</option>
                <option value="tg1002953">75</option>
                <option value="tg1002954">80</option>
                <option value="tg1002955">85</option>
            </select>
            <select name="inch" id="inch">
                <option value="" selected>■インチを選択</option>
<!--▼20230106削除
                <option value="R8">8</option>
                <option value="R9">9</option>
                <option value="R10">10</option>
-->
                <option value="tg1010873">~10</option>
                <option value="tg1010874">11</option>
                <option value="tg1002930">14</option>
                <option value="tg1002931">15</option>
                <option value="tg1002932">16</option>
                <option value="tg1002933">17</option>
                <option value="tg1002934">18</option>
                <option value="tg1002935">19</option>
                <option value="tg1002936">20</option>
                <option value="tg1002937">21</option>
                <option value="tg1002938">22</option>
                <option value="tg1002939">23</option>
                <option value="tg1002940">24</option>
                <option value="tg1002942">26</option>
<!--▼20230106削除
                <option value="R28">28</option>
-->
            </select>
    </div>

    <button type="button" value="上記の内容で検索" class="btn-search-size">上記の内容で検索<span>&gt;</span></button>
    <input type="hidden" name="sitem" id="sitem"><input type="hidden" name="nitem"><input type="hidden" value="A" name="f">

</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
jQuery(function($){
   //sp mode
	var url_pram = $(location).attr('search');
	var mode = url_pram.split("mode=");
	if ( mode[1] != undefined && mode[1] == "sp") {
		$('body').addClass('modeSP');
	}

   $('.btn-search-size').click(function(){
          var size = $('#size').val();
          var henp = $('#henp').val();
          var inch = $('#inch').val();
		  var g = $('#g').val();

		  var data = size + '-' + henp + '-' + inch;
		  $('#sitem').val(data);
		  //$('#myForm').submit();
		  window.open('https://search.rakuten.co.jp/search/mall/タイヤ/'+ g + '/' + data + '/?sid=223203');
   });
});
</script>
<!-- <script type="text/javascript" src="https://r.r10s.jp/com/js/d/pa/pa3.min.js" async defer></script> -->

</body>
</html>

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

int32_t
int32_t

2023/10/24 01:58

実現したいことを具体的に書いてください。「検索する」ボタンを押すと具体的に何が起きてほしいのですか?
moromiso
moromiso

2023/10/24 06:51

コメントありがとうございます。 言葉足らずで申し訳ないです。 実現したいことを追記しましたので確認お願いします。 説明が下手ですが、これで伝わりますでしょうか？？
int32_t
int32_t

2023/10/24 07:10

このコードがどのように「楽天上に表示」と関係するのか不明です。楽天の検索結果ページに遷移するということでしょうか。 「ユーザが、幅 100、扁平率 20、インチ未選択で [検索する] ボタンを押したら、htts://〜 という URL が生成され、それが #view のリンクとして設定される」というぐらい具体的にお願いします。
moromiso
moromiso

2023/10/24 10:04

例えば 幅110 扁平率70 インチ未選択 で入力すると下記のアドレスへジャンプできるように設定したいです。 https://search.rakuten.co.jp/search/mall/タイヤ+110%2F70/?sid=XXXXX ちなみにjs初心者で#viewがどういう動きをするとか全く分かっていない状態です。
Lhankor_Mhy
Lhankor_Mhy

2023/10/24 10:06

あ、行き違いました。そっちでいいんですね。
moromiso
moromiso

2023/10/25 10:09

あ、ここURL張っていいんですねｗ https://www.rakuten.ne.jp/gold/autoway/ ここの検索ページのようなものを作れと指示が出て、見様見真似で作成している感じです。
Lhankor_Mhy
Lhankor_Mhy

2023/10/25 10:14

えええ。 見様見真似してるならコピペぐらいしましょうよ。答え書いてあるじゃないですか。 <select name="size" id="size"> <option value="" selected="">■タイヤ幅を選択</option> <option value="tg1002956">135</option> <option value="tg1002957">145</option> <option value="tg1002958">155</option> <option value="tg1002959">165</option> <option value="tg1002960">175</option> <option value="tg1002961">185</option> <option value="tg1002962">195</option> <option value="tg1002963">205</option> <option value="tg1002964">215</option> <option value="tg1002965">225</option> <option value="tg1002966">235</option> <option value="tg1002967">245</option> <option value="tg1002968">255</option> <option value="tg1002969">265</option> <option value="tg1002970">275</option> <option value="tg1002971">285</option> <option value="tg1002972">295</option> <option value="tg1002973">305</option> <option value="tg1002974">315</option> <option value="tg1002975">325</option> <option value="tg1037304">335</option> </select>
moromiso
moromiso

2023/10/26 01:57

どうやらソースを見ているところが違ったようでした。 こちらのソースを発見してどうにか動かせるとこまでできました！ ですが、これだと必ずタイヤの幅を入力しないと駄目なようで、扁平率やインチだけの入力だと検索結果が表示されません。 モバイル版（下記のURL）だと扁平率だけとかでも検索できるようなのですが。。。 すみません、原因と解決方法を知りたいです。 お願いします。 https://www.rakuten.ne.jp/gold/autoway/sp-index.html
moromiso
moromiso

2023/10/26 02:05

というより、このモバイル版のソースだと、どの部分を真似すればこのようにちゃんと動くのでしょうか？？
moromiso
moromiso

2023/10/26 03:04

なんどもすみません。。。 上記は無視してください。 ソースコード書き換えたのですが、この場合扁平率だけの選択だと検索結果が表示されないです。 これを表示させるにはどうしたらできますか？ どんどん質問の趣旨が変わり申し訳ないです。
Lhankor_Mhy
Lhankor_Mhy

2023/10/27 01:24

うんこってなんですの……？
guest

回答2件

0

ご提示のコードが何をやっているのかよくわからなかったので、検索結果のURLを見て適当に書いてみました。

html
1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
7    <meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scalable=yes,initial-scale=1.0">
8    <title>タイヤを探す</title>
9</head>
10
11<body>
12    <form id="myForm">
13        <div class="select-list">
14
15            <select name="size" id="size">
16                <option value="" selected>■タイヤ幅を選択</option>
17                <option value="tg1002956">135</option>
18                <option value="tg1002957">145</option>
19                <option value="tg1002958">155</option>
20                <option value="tg1002959">165</option>
21                <option value="tg1002960">175</option>
22                <option value="tg1002961">185</option>
23                <option value="tg1002962">195</option>
24                <option value="tg1002963">205</option>
25                <option value="tg1002964">215</option>
26                <option value="tg1002965">225</option>
27                <option value="tg1002966">235</option>
28                <option value="tg1002967">245</option>
29                <option value="tg1002968">255</option>
30                <option value="tg1002969">265</option>
31                <option value="tg1002970">275</option>
32                <option value="tg1002971">285</option>
33                <option value="tg1002972">295</option>
34                <option value="tg1002973">305</option>
35                <option value="tg1002974">315</option>
36                <option value="tg1002975">325</option>
37                <option value="tg1037304">335</option>
38            </select>
39            <select name="henp" id="henp">
40                <option value="" selected>■偏平率を選択</option>
41                <option value="tg1002943">25</option>
42                <option value="tg1002944">30</option>
43                <option value="tg1002945">35</option>
44                <option value="tg1002946">40</option>
45                <option value="tg1002947">45</option>
46                <option value="tg1002948">50</option>
47                <option value="tg1002949">55</option>
48                <option value="tg1002950">60</option>
49                <option value="tg1002951">65</option>
50                <option value="tg1002952">70</option>
51                <option value="tg1002953">75</option>
52                <option value="tg1002954">80</option>
53                <option value="tg1002955">85</option>
54            </select>
55            <select name="inch" id="inch">
56                <option value="" selected>■インチを選択</option>
57                <option value="tg1010873">~10</option>
58                <option value="tg1010874">11</option>
59                <option value="tg1002930">14</option>
60                <option value="tg1002931">15</option>
61                <option value="tg1002932">16</option>
62                <option value="tg1002933">17</option>
63                <option value="tg1002934">18</option>
64                <option value="tg1002935">19</option>
65                <option value="tg1002936">20</option>
66                <option value="tg1002937">21</option>
67                <option value="tg1002938">22</option>
68                <option value="tg1002939">23</option>
69                <option value="tg1002940">24</option>
70                <option value="tg1002942">26</option>
71            </select>
72        </div>
73
74        <button type="submit" value="上記の内容で検索" class="btn-search-size">上記の内容で検索<span>&gt;</span></button>
75
76    </form>
77
78    <script>
79        document.getElementById('myForm').addEventListener('submit', e => {
80            e.preventDefault();
81            location.href = `https://search.rakuten.co.jp/search/mall/タイヤ/200286/${[...document.querySelectorAll('.select-list select')].flatMap(select => select.selectedOptions[0].value == "" ? [] : select.selectedOptions[0].value).join('-')}/?sid=223203`
82        })
83    </script>
84</body>
85
86</html>

投稿2023/10/27 01:44

Lhankor_Mhy
Lhankor_Mhy

総合スコア37683

moromiso
moromiso

2023/10/27 03:19

入れ違いになってしまったようで、新たに質問投稿してました！ これ完璧ですね！ こんな少ないコードで再現できるなんて思いませんでした。 ほんとありがとうございます！！
guest

0

ベストアンサー

実際に動作をさせてそれをエミュレートするだけで実現可能でしょう。
クライアントのjsでは実装は厳しいかもしれないので、サーバーサイドのクローラを使うか場合によってはヘッドレスchromeなどで実装してください
前のお伝えしたかもしれませんが、接続先がAPIを公開しているならそれに合わせた仕様を設定するとよいでしょう

参考

javascript
1<script>
2window.addEventListener("DOMContentLoaded", () => {
3  document.querySelector("#btn").addEventListener("click", e => {
4    let url = "https://サンプル/";
5    var s = [...document.querySelectorAll('select')]
6    .filter(x =>x.value)
7   .map(x => x.value)
8    .join('/');
9    var view = document.querySelector('#view');
10    view.href = view.textContent = url + s;
11  });
12});
13</script>
14  <select name="haba">
15    <option value="">タイヤの幅</option>
16    <option value="90">90</option>
17    <option value="100">100</option>
18    <option value="110">110</option>
19  </select>
20
21  <select name="henpei">
22    <option value="">扁平率</option>
23    <option value="20">20</option>
24    <option value="30">30</option>
25    <option value="40">40</option>
26  </select>
27
28  <select name="inch">
29    <option value="">インチ</option>
30    <option value="I1">10</option>
31    <option value="I2">11</option>
32    <option value="I3">12</option>
33  </select>
34
35  <div class="l-flex">
36      <button value="◆^◆C◆◆" id="btn">検索する</button>
37      <a id="view"></a>
38  </div>

ボタンのvalueはどうしたいのかわからないのでそのままにしてあります

投稿2023/10/24 04:32

編集2023/10/24 10:00
yambejp
yambejp

総合スコア118253

moromiso
moromiso

2023/10/24 06:49

コメントありがとうございます。 楽天APIを探してみたのですが、これに対応するのはなさそうでした。 あと申し訳ないですがクローラーやヘッドレスクローム等が調べてもわからないのですが、jsだけでの作成はやはり無理なのでしょうか？
yambejp
yambejp

2023/10/24 07:06

すでに回答している通り「実際に動作をさせてそれをエミュレートする」ことができるならjsだけでもできますし、動作しないならjsだけでは無理です。ブラウザの仕組み上9割以上の確率で無理だと思いますが、やってみないとわかりません。イリーガル要素があるので回答者がやれるとは言えないので、自己責任でおためしください
moromiso
moromiso

2023/10/24 09:40

あ、すみません。 そもそもこのコード自体が間違っていると思われるのですが、どこが間違っていますか？ というのが質問の趣旨でした。 エディター上でも動かないので。。。 その後楽天にて動かしたいと思ってます。
yambejp
yambejp

2023/10/24 10:00 編集

単純に動かない理由は以下の箇所です view.href = view.innerText = url + a; ↓↓↓ view.href = view.innerText = url + s; ただセレクトボックスの値に「/」がついていますが、これは「%2F」にエスケープされるので もし仮にhaba=90、hepei=20、inch=11を「https://サンプル/90/20/11」にしたいなら 各optionのvalueから「/」をとってください 追記分を参考にしてください
moromiso
moromiso

2023/10/25 10:20

ありがとうございます！ 検索するを押すとしっかりURLが表示されるようになりました！ ちなみにこれはURL表示ではなく勝手にジャンプするようにできませんか？？ あとURLなのですが下記のようなアドレスになるのですが、タイヤの後に選択した数字を入れ込みたいです。 https://search.rakuten.co.jp/search/mall/タイヤ/?sid=XXXXX 現在の表記だと選択したものが後ろに表記されてしまうのですが、可能でしょうか？？
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

プルダウン検索を実装したい2