select値をhiddenのvalueに渡したい

selectで選択されたvalue値を下のhiddenのvalue値(id)に渡して、
hiddenのvalue値(id)がselectで選択されたvalue値になるような
フォームを作りたいのですが、作り方をお教え頂ければ幸いです。

<form name="form" method="get" action="index.cgi">
<select name="mode">
<option value="100023">和書</option>
<option value="100241">洋書</option>
<option value="100524">エレクトロニクス</option>
</select>
<input type="hidden" name="serch_janru" value="id" />
<input type="text" name="keyword" value="keyword" /><input type="submit" name="submit" value="商品を検索" />
</form>

ソース等、具体的にお教え頂けると助かります。
どうぞ宜しくお願い致します。

No.1 ベストアンサー 回答者： yyr446 回答日時： 2009/09/29 11:54

<form>には一切手をつけないとして、

javascriptで
<script type="text/javascript">
<!--
window.onload = function () {
//@cc_on
document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
'change', function (evt) {
var e　= evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
if (e.type=="select-one" && e.name=="mode"){
alert(e.value);
var elements = document.getElementsByName("serch_janru");
elements[0].value=e.value;
}
}, true);
}
// -->
</script>
こうできます。

この回答へのお礼

出来ました！ありがとうございます。
大変助かりました。ご教授に感謝致します。

お礼日時：2009/09/29 13:16

No.2 回答者： yambejp 回答日時： 2009/09/29 12:18

>selectで選択されたvalue値を下のhiddenのvalue値(id)に渡して

それってmodeでもserch_janruでも同じ値をindex.cgiに送るってことですか？
無駄なトラフィックが増えるだけで意味ないので受け側で調整した方がよいのでは？

ちなみにjavascriptでhiddenに渡すのはユーザビリティとしては
最低なのでやめた方がよいかと。
（スクリプトが有効でないとserch_janruは手入力もできないので
つねに空になるので・・・）

この回答へのお礼

ご回答ありがとうございます。
どうしても即興でしなければならい事情がありまして・・・。
貴重なご助言、参考にさせて頂きます。

お礼日時：2009/09/29 13:18