<input>の選択肢をプルダウンメニューから受け取り、hiddenで

質問

<input>の選択肢をプルダウンメニューから受け取り、hiddenで渡したいのですが、どうすればよいでしょうか？

▽プルダウン例
<FORM>
<SELECT>
<OPTION SELECTED>SELECT</OPTION>
<OPTION VALUE="1">A</OPTION>
<OPTION VALUE="2">B</OPTION>
<OPTION VALUE="3">C</OPTION>
</SELECT>
</FORM>

↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。
※選択肢は3つだけではなくて、たくさんあります。

▽input例
<input name="hosted_button_id" value="hoge" type="hidden">

http://okwave.jp/qa/q6016233.htmlの質問内容が知りたいことに近かったのですが、value値ではなくて、選択した内容そのものをhiddenへ渡す方法を教えてください。

回答No.4

aa_akiya · ベストアンサー

まずhiddenの値についてですが、

<input id="hosted_button_id" name="hosted_button_id" value="hoge" type="hidden">

↑のように初期表示の時のvalueの部分をhogeではなく、

<input id="hosted_button_id" name="hosted_button_id" value="<?php 「プルダウンの初期値の名称セット」?>" type="hidden">

↑として予めセットするだけでよいのではないでしょうか。

> APIにはジャンルIDだけ、送ればよいと思います。
> 名称を送りたいのは、遷移先のページタイトルと、遷移先のプルダウン初期表示用で使いたいためです。
> また、ジャンルIDと名称を同時に送ることについて、hiddenで送る行為自体は問題ないと思うのですが、一旦結合してsubmitで送ると、APIにジャンルIDだけが送れなくなるので、結果として、まずいのではないかと思ってます。

遷移先というのは自分で管理されているページですよね？
でしたら名称を別途送る理由が無いと思うのですが…。

最初に回答させていただきましたが、
IDをキーとして名称を値とした配列を作っておけば、
IDさえ送れば名称を決めることができるので、
それで問題ないのではないでしょうか。

APIで名称を使用しなくてもよいのであれば、
IDのみをやりとりした方がずっとシンプルですよ。

お礼

ご回答ありがとうございました(何度もすいません…)。

アドバイスいただいた方法で検討してみます。

回答No.3

aa_akiya

まず、例示のスクリプトがうまく動作しなかったようですみませんでした。
自分の環境では動作したので問題ないと思っていました。

> 今、お伺いしているプルダウンは、添付画像中央部分なのですが、

添付画像が見当たらないのですがどちらでしょう？

> 一旦結合して、後で分けるやり方は、難しいかなと思っていたのですが、書いていただいたコードを見たらイケそうだったので、実際に試してみました。
> やってみて初めて気付いたのですが、自分のケースの場合、このやり方では難しいことが分かりました。
> submitした時点で、APIへパラメータを投げているので、option value=の値を加工すると、その時点で処理がうまく走らなくなってしまいます。「option value=の値」「option value=を加工した値」の両方を投げればいいのか、とも思ったのですが、それだと一つのセレクトボックスでは送れないのではないかと思い、なんとか javascriptで解決したいと思っています。

他の方も疑問に思っているようですが、どんなAPIを使用したいのでしょうか。
APIにはジャンルのIDと名称を同時に送ってやらないといけないのでしょうか。

submitした時点でAPIへパラメータを投げているとは、
htmlフォーム→自サーバ→API　という遷移でなく、
htmlフォーム→API→自サーバ　というような流れなのですか？

補足

＞添付画像が見当たらないのですがどちらでしょう？
添付しました。

＞どんなAPIを使用したいのでしょうか。
楽天APIです。

＞APIにはジャンルのIDと名称を同時に送ってやらないといけないのでしょうか。
APIにはジャンルIDだけ、送ればよいと思います。
名称を送りたいのは、遷移先のページタイトルと、遷移先のプルダウン初期表示用で使いたいためです。
また、ジャンルIDと名称を同時に送ることについて、hiddenで送る行為自体は問題ないと思うのですが、一旦結合してsubmitで送ると、APIにジャンルIDだけが送れなくなるので、結果として、まずいのではないかと思ってます。

＞submitした時点でAPIへパラメータを投げているとは、
＞htmlフォーム→自サーバ→API　という遷移でなく、
＞htmlフォーム→API→自サーバ　というような流れなのですか？
多分、indexフォーム→API→サーバ→searchフォーム→API→サーバ→searchフォームの流れだと思うのですが、すいません、ちょっとこの辺の流れについてはまだ、勉強中で、よく分かってないため、もしかしたら、違うかもしれません。

回答No.2

yuu_x

<FORM ACTION="">
<P>
<SELECT>
<OPTION SELECTED>SELECT</OPTION>
<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION>
</SELECT>
</P>
</FORM>

or

<FORM ACTION="">
<P>
<SELECT>
<OPTION SELECTED>SELECT</OPTION>
<OPTION>A</OPTION>
<OPTION>B</OPTION>
<OPTION>C</OPTION>
</SELECT>
</P>
</FORM>

value を連番で振らなければいけないなんて規則はない。

[quote cite="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#attr-option-value "]
The value attribute provides a value for element. The value of an option element is the value of the value attribute, if there is one, or the textContent of the element, if there isn't.
[/quote]

連番にしたとしても 0 ⇒ A であることが分かっているはずだから、受け取り側で何とでもなるのでは。

回答No.1

aa_akiya

■JavaScriptで解決するなら
<form>
<select onchange="document.getElementById('hosted_button_id').value=this.options[this.selectedIndex].text">
<option selected>SELECT</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</form>

<input id="hosted_button_id" name="hosted_button_id" value="hoge" type="hidden">

http://okwave.jp/qa/q6217393.html
上記に解答がありますが、

■phpで解決するなら
<select name="genre">
<option value="1:ジャンル名">…となるようにし、

$tmp = explode(":", $_GET["genre"]);
list($genreId, $genreName) = $tmp;

補足

回答ありがとうございます。そのままだと識別子エラーとなったので、下記のようにしてみました。
<form action="search.php" method="get">
<select onchange="document.getElementById('hosted_button_id').value=this.options.item(this.selectedIndex).text">

あと一つだけ解決したい点があるので、追加で質問させてください。

今、お伺いしているプルダウンは、添付画像中央部分なのですが、
自分自身にsubmitして、右側のソートだけを選択して検索させた場合(onchangeさせずに、プルダウン初期値の内容で検索する場合)、内容がhiddenに送れません。
※プルダウンの初期値は、受け取った値を表示するように設定しています
※一度選択を外してまた選択し直せば正常動作します(←これをしなくてもデフォルトの値をhiddenへ渡すにはどうすればよいでしょうか。)

http://javascriptist.net/ref/event.onchange.htmlに掲載されているイベントを試してみたのですが、うまく渡りませんでした。

何かよい方法はないでしょうか？

▽PHP
一旦結合して、後で分けるやり方は、難しいかなと思っていたのですが、書いていただいたコードを見たらイケそうだったので、実際に試してみました。
やってみて初めて気付いたのですが、自分のケースの場合、このやり方では難しいことが分かりました。
submitした時点で、APIへパラメータを投げているので、option value=の値を加工すると、その時点で処理がうまく走らなくなってしまいます。「option value=の値」「option value=を加工した値」の両方を投げればいいのか、とも思ったのですが、それだと一つのセレクトボックスでは送れないのではないかと思い、なんとかjavascriptで解決したいと思っています。