![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
すみません、web作成している者です、困っておりますのでHELPです!
3つのselectでURLパラメータを取得する方法
例えばhttp://www.xxx.co.jp/yyy.htmlと言うページを用意して
selectで赤・丸・山田を選択したらURLが
http://www.xxx.co.jp/yyy.html?color=red&name=cir …を開くように
したいです。
ご教授頂ければ幸いです。
<form id="search" name="search">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
形を選択 <select id="type" name="type">
<option value="">指定しない</option>
<option value="square">四角</option>
<option value="circle">丸</option>
</select>
人を選択 <select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>
</form>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
No.1 の回答のように、単純にフォーム送信すればよいと思いますが、
送信ボタンを押すひと手間も省きたいのであれば、以下の処理を加えてはいかがでしょうか。
<form> に change イベントを実装する
https://developer.mozilla.org/ja/docs/Web/API/Ev …
change 発生時に、
三つの <select> を読み取って値が揃っていれば
https://html.spec.whatwg.org/multipage/form-elem …
<form> 内容を送信する
https://developer.mozilla.org/ja/docs/Web/API/HT …
No.1
- 回答日時:
こんにちは
>~~?color=red&name=circle&human=yamada
HTMLソースの方は
~~?color=red&type=circle&human=yamada
を意図しているようなので、そのままにしてありますが・・・
以下ではどうでしょうか?
(自分自身を開くのなら、action属性は省略しても同様となります)
<form id="search" name="search" method="GET" action="http://www.xxx.co.jp/yyy.html">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
形を選択 <select id="type" name="type">
<option value="">指定しない</option>
<option value="square">四角</option>
<option value="circle">丸</option>
</select>
人を選択 <select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>
<p>
<input type="submit" value="送信" />
</form>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
ラジオボタンとプルダウンを連...
-
セレクトボックスを2つ選択して...
-
ラジオボタンの選択に応じてプ...
-
プルダウンで選択した項目にあ...
-
セレクトボックスを使用した、...
-
selectを変更不可にしたい
-
【javascript】連想配列からセ...
-
mailto機能について
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
Selectの中身をfor文で入れる
-
JQuery selectが反映されない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報